关于图形的理解
一条或者多条路径相交产生闭环时就会形成一个图形。所以,图形的基础元素是路径,而在 canvas 中画出图形就是将路径闭合,然后通过描边或填充路径区域来渲染图形。
闭合路径
闭合方法:
// 创建从当前点到开始点的路径
context.closePath();
闭合路径就是创建当前路径中的结束点与开始点的路径。使用路径中的一个例子来做闭合测试...
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(50,20);
ctx.arcTo(150,20,150,70,50);
ctx.lineTo(150,150);
// 手动闭合 or
ctx.lineTo(20,20);
// 自动闭合
ctx.closePath();
ctx.stroke();
由此可见,我们可以通过闭合路径绘制一些基本图形!
绘制长方形
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(180,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.closePath();
ctx.stroke();
绘制三角形
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(30,100);
ctx.lineTo(170,100);
ctx.closePath();
ctx.stroke();
绘制圆形
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.stroke();
填充路径
填充方法:
// 填充当前绘图(路径)。默认颜色是黑色。
context.fill();
如果路径未关闭,那么 fill() 方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(30,100);
ctx.lineTo(170,100);
ctx.fill();