一条HTML5 canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线。路径可以用于在HTML5 canvas上绘制各种类型的图形:直线、圆形、多边形等等。路径的绘制是canvas的核心,必须很好的理解和掌握。
开始和关闭一条路径
要开始和关闭一条路径可以使用2D上下文的beginPath()和closePath()函数。例如下面的例子:
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.beginPath();
//... 绘制路径
context.closePath();复制代码
moveTo()函数
当你在canvas中绘制一条路径的时候,你可以想象自己正在使用一支“虚拟笔”。这支虚拟笔总是位于某个位置,你可以使用2D上下文的moveTo(x, y)函数来移动这支虚拟笔。例如下面的代码:
context.moveTo(10,10);复制代码
这个例子将“虚拟笔”移动到(10,10)这个坐标点上。
lineTo()函数
lineTo函数用于从虚拟笔的当前位置绘制一条直线到lineTo()函数中指定的点。下面是一个例子:
context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();复制代码
这个例子中首先移动虚拟笔到(10,10)坐标点位置,然后从这个点绘制一条直线到(50,50)坐标点。
lineTo()函数还会将虚拟笔移动到执行的结束点位置。上面的例子中是移动到(50,50)的位置。
stroke()函数 + fill()函数
在你没有通知2D上下文绘制路径之前,实际是不会在画布上绘制任何东西的。你可以通过stroke()或fill()函数来通知2D上下文。
stroke()函数用于路径操作指定的图形的外轮廓。
fill()函数用于填充有路径操作指定的图形。
下面的例子展示了stroke()或fill()函数的用法。
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();复制代码
上面代码的返回结果如下:
线条的宽度
你可以使用2D上下文的lineWidth属性来设置绘制线条的宽度。下面是一个例子:
context.lineWidth = 10;复制代码
上面的例子设置绘制线条的宽度为10像素。
下面的例子绘制3条直线,它们的宽度分别为1,5和10。