canvas之十字架，beginPath()的作用

最新推荐文章于 2024-04-30 20:15:41 发布

CHAO_YE

最新推荐文章于 2024-04-30 20:15:41 发布

阅读量1.8k

点赞数

文章标签： canvas html js css html5

本文链接：https://blog.csdn.net/qq_43411412/article/details/106342637

版权

本次我们主要讲两点：一点是如何绘制十字架，另一点是beginPath()的作用。
用canvas绘制十字架并不难，首先我们要对其必要的元素坐标胸有成竹，我们可以在画板上画出并标出必要地方的元素坐标，如下所示（右侧是坐标轴）：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
    <style>
        #myc{
            border:1px solid rgba(250,20,20,1);  
            display:block;
            margin:auto;
        }
    </style>
</head>
<body>
    <canvas id="myc"></canvas>
    <script>
        //
        var c=document.getElementById("myc"); 
        c.width=300;
        c.height=300;
        var cxt=c.getContext("2d");  
        var x=100,y=120,w=110;
        cxt.moveTo(x,y);
        cxt.lineTo(x+w,y);
        cxt.linewidth=40;
        cxt.strokeStyle="blue";
        cxt.stroke();   //注释一
        cxt.beginPath();  //注释二
        cxt.moveTo(x+w/2,y-w/2);
        cxt.lineTo(x+w/2,y+w/2);
        cxt.linewidth=40;
        cxt.strokeStyle="green";
        cxt.stroke();
    </script>
</body>
</html>

注释一：当我们没有用到代码beginPath()时，此处的stroke()可以省略，只在最后用一次即可。
注释二：beginPath()是表明接下来绘制的图形将是一个新的路径，在本段代码中若没有本行代码，十字架的颜色便只会是绿色，因为不使用beginPath()就表示着上下两条线段属于同一路径，而在同一路径中使用的是代码中的最后一个样式。另外与beginPath()代码相对应的是closePath(),然而要注意的是closePath()不是结束路径，而是关闭当前路径。在他之后的路径并不是一个新的路径，所以只有使用beginPath()才能实现一段新的绘图路径。

CHAO_YE

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas之十字架，beginPath()的作用

本次我们主要讲两点：一点是如何绘制十字架，另一点是beginPath()的作用。用canvas绘制十字架并不难，首先我们要对其必要的元素坐标胸有成竹，我们可以在画板上画出并标出必要地方的元素坐标，如下所示（右侧是坐标轴）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
复制链接

扫一扫