canvas补充

最新推荐文章于 2025-04-11 21:43:34 发布

莎莉蛙

最新推荐文章于 2025-04-11 21:43:34 发布

阅读量160

点赞数

CC 4.0 BY-SA版权

文章标签： canvas

本文链接：https://blog.youkuaiyun.com/qq_41880978/article/details/85006377

本文深入探讨了在使用HTML5 Canvas进行绘图时，closePath与lineTo方法在绘制三角形过程中的细微差别。通过具体代码示例，展示了这两种方法在图形闭合时的不同表现，特别是对于最后一段线的处理方式及其对图形完整性和视觉效果的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在绘制三角形的过程中。
因为使用beginPath()和closePath()会自动闭合，这使得我们会忽略一个问题。
当使用最原始的lineTo，一个点一个点连接，你会发现，最后一条线回到初始点的时候，产生了空缺。这是closePath()中不会产生的。
1.closePath()

	 ctx.beginPath();
         ctx.moveTo(100,100);
         ctx.lineTo(200,200);
         ctx.lineTo(20,200);
            
        // 填充颜色为蓝色
         ctx.fillStyle = 'blue';
         ctx.fill();    
         ctx.closePath();//  自动闭合

        // 路径颜色为红色 
         ctx.strokeStyle ='red';
        //  路径宽度为9
         ctx.lineWidth = 10;
         ctx.stroke();

效果
在这里插入图片描述
2.lineTo()

 		ctx.beginPath();
         ctx.moveTo(100,100);
         ctx.lineTo(200,200);
         ctx.lineTo(20,200);
         ctx.lineTo(100,100);   // 与上面不同的地方
            
        // 填充颜色为蓝色
         ctx.fillStyle = 'blue';
         ctx.fill();   

        // 路径颜色为红色 
         ctx.strokeStyle ='red';
        //  路径宽度为9
         ctx.lineWidth = 10;
         ctx.stroke();

效果：
在这里插入图片描述