canvas补充

在绘制三角形的过程中。
因为使用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();

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

猜你喜欢

转载自blog.csdn.net/qq_41880978/article/details/85006377
今日推荐