图形的基本元素是路径。路径通过不同颜色和宽度的线条的组合。任何一个路径都是需要闭合的,由起点与终点相连接组成的。

beginPath 绘制一个带变宽的矩形

开始绘制一条路径, 告诉浏览器我要开始绘制图形了。

moveTo 绘制坐标点

使用 beginPath 是告诉浏览器要开始绘制图形了, 使用 moveTo 就是绘制图形

moveTo(x,y);

lineTo 设置坐标移动的位置

lineTo(x,y);

stroke 绘制线条

通过线条来绘制图形轮廓

画一条直线

<canvas id="canvas-1" width="300" height="300" style="border: 1px solid #333;"></canvas>


<script>
var canvas = document.getElementById("canvas-1");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50,50);    //  x  50 y  50 的位置绘制一个点
ctx.lineTo(200,200);  //  x  200 y  200 的位置绘制一个点
ctx.stroke();        
</script>

画一个三角形

<canvas id="canvas-2" width="300" height="300" style="border: 1px solid #333;"></canvas>


<script>
var canvas = document.getElementById("canvas-2");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50,50);   
ctx.lineTo(200,200); 
ctx.lineTo(50,200);  //  x  50 y  200 的位置绘制一个点
ctx.stroke();        //连接两个点  两个点可以确认一条直线
</script>
这个时候会发现三角形并没有闭合, 对的 因为我们只绘制了 3 个点, 三个点可以绘制三角形的三条边, 但是绘制的边框只有 2 条, 我们需要告诉浏览器闭合图形。

closePath

关闭图形绘制, 同时会自动闭合图形, 以起点与终点两个坐标来闭合
<canvas id="canvas-3" width="300" height="300" style="border: 1px solid #333;"></canvas>


<script>
var canvas = document.getElementById("canvas-3");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50,50);   
ctx.lineTo(200,200); 
ctx.lineTo(50,200);  
ctx.closePath();     // 关闭图形绘制, 同时可以闭合图形
ctx.stroke();        
</script>