1.ctx.beginPath()：开始一条路径，或重置当前的路径 ，怎么理解这句话呢?举个例子，比如你想先画一条红色的粗细为1的线条，然后紧接着画一条粗细为10蓝色的线条。安装我们的想法代码是这样的：

var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineWidth=1; ctx.strokeStyle="red"; ctx.lineTo(100,100); ctx.stroke();//绘制粗细为1的红色线条 /*ctx.beginPath();*/ ctx.lineWidth=10; /*ctx.moveTo(100,100); */ /*开始一条新路径后要重新确定起点*/ ctx.strokeStyle="blue"; ctx.lineTo(100,20); ctx.stroke();//绘制粗细为10的蓝色线条

这样实现了吗，有什么问题?请看该代码的效果图(图中棕色的边框是给给canvas加的border，便于查看的)：

发现线条是画了两条，但是线条的状态都被第二个的线条的状态给覆盖了。

ctx.beginPath()是开始一条新路径，或重置当前路径，打开注释：

现在这个效果才是和刚才我们描述的一样的，是我们想要的效果。

2.context.closePath()：创建从当前点到开始点的路径，主要是用于话封闭图形，画一个三角形：

var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.lineTo(75,50); //ctx.closePath(); ctx.stroke();

三角形，一个封闭的图形，我们需要最后再lineTo(75,50)这个起点，打开ctx.closePath()的注释，注释掉ctx.lineTo(75,50)可以达到同样的效果，画出一个封闭的三角形。该方法就是创建当前点到起点的路径。

画布裁剪

clip() ：从原始画布中剪切任意形状和尺寸。注：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。我们可以在裁剪之前通过context.save()保存画布状态，之后在需要的时候用context.restore()恢复。

var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); // 剪切矩形区域 ctx.fillStyle="#E6**0"; ctx.rect(50,20,200,120); ctx.fill(); ctx.clip(); // 在 clip() 之后绘制绿色矩形 ctx.fillStyle="green"; ctx.fillRect(0,0,150,100);

绿色部分为裁剪区域。

原文链接：

来源作者：lishihong108