Html5 Canvas小知识

1.HTML5 canvas moveTo() 方法（确定顶点）

 

2.HTML5 canvas lineTo() 方法（以顶点为矩形画成的斜线）

 

下面我们试着通过Canvas为我们提供的方法来绘制一个简单的三角形。

HTML代码 <canvas id="canvas"></canvas> JavaScript代码 window.onload = function(){   var canvas = document.getElementById('canvas');   if (canvas.getContext){     var ctx = canvas.getContext('2d');     ctx.beginPath();     ctx.moveTo(55,50);     ctx.lineTo(100,75);     ctx.lineTo(100,25);     ctx.fill();   } }

在这段代码里，我们用了 Canvas 里的给我们提供的三个方法 beginPath()，moveTo() 和 lineTo()。

beginPath()：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

moveTo(x, y)：将笔触移动到指定的坐标x以及y上,当 Canvas 初始化或者beginPath()调用后，你通常会使用 moveTo() 函数设置起点。

lineTo(x,y)：绘制一条从当前位置到指定x以及y位置的直线。该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo（）函数改变。

不过，这里还有一种情况需要注意的就是如果我们最后对所画的三角形不是颜色填充而是描边stroke()，这个时候代码就有些不一样了。

window.onload = function(){   var canvas = document.getElementById('canvas');   if (canvas.getContext){     var ctx = canvas.getContext('2d');     ctx.beginPath();     ctx.moveTo(125,125);     ctx.lineTo(125,45);     ctx.lineTo(45,125);     ctx.closePath();     ctx.stroke();   } }

同样的调用了beginPath()作为我们画路径的开始，中过的再加线过程跟以面的是一样的，只是在描边 stroke() 时，我们还要先调用一下closePath()方法来闭合路径。如果不使用closePath()方法，那么只会描绘出两条线段，而不是一个完整的三角形。

转载于:https://www.cnblogs.com/Lily-L/p/6223781.html