html坐标绘制路径,HTML5 CANVAS：绘制路径

一条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。