【原生javascript】canvas画布

最新推荐文章于 2024-07-12 15:10:34 发布

精灵福将马国成

最新推荐文章于 2024-07-12 15:10:34 发布

阅读量221

点赞数 1

本文链接：https://blog.csdn.net/weixin_42705570/article/details/87348098

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas {
             border: 1px solid red;
        }
    </style>
</head>
<body>
    <p>canvas不能通过css样式改变宽高，只能在标签内改变</p>
    <canvas width="600" height="400"></canvas>

    <script type="text/javascript">

        /*
        
        canvas绘图步骤
        1.先落笔，站到落笔点的坐标
        2.落笔，然后连线
        3.描边

         */

         //获取canves画布
        var canvas =document.querySelector("canvas");

         //获取绘图上下文，
        var ctx=canvas.getContext("2d");

         // 1.先落笔，画布的左上角为原点
        ctx.moveTo(50, 50);

         // 2.连线到某处
        ctx.lineTo(300, 200);

        // 3.描边
        ctx.stroke();

        // 开启新图层，防止两条线的干扰
        ctx.beginPath(); 
        
        //带颜色的横线
        // 1.落笔
        ctx.moveTo(100, 150);
        // 2.连线
        ctx.lineTo(300, 150);
        // 3.设置属性
        ctx.strokeStyle="blue";  //红色的线
        ctx.lineWidth="20";   //设置线宽
        // 4.描边
        ctx.stroke();


     </script>
</body>
</html>

精灵福将马国成

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【原生javascript】canvas画布

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫