HTML5 CANVAS：绘制路径

作者：匿名字体：[增加减小] 来源：互联网时间：2018-12-03

本文主要包含HTML5教程,HTML5中国,HTML5 CANVAS：绘制路径,html5cn,html5资料,html5文章,ht等相关知识,匿名希望在学习及工作中可以帮助到您

　　一条HTML5 canvas路径是通过绘制指令来连接一系列的点，由这一系列的点构成直线或曲线。路径可以用于在HTML5 canvas上绘制各种类型的图形：直线、圆形、多边形等等。路径的绘制是canvas的核心，必须很好的理解和掌握。

　　开始和关闭一条路径

　　要开始和关闭一条路径可以使用2D上下文的beginPath()和closePath()函数。例如下面的例子：

var context = canvas.getContext("2d");

context.beginPath();

//... 绘制路径

context.closePath();

复制代码
　　moveTo()函数

　　当你在canvas中绘制一条路径的时候，你可以想象自己正在使用一支“虚拟笔”。这支虚拟笔总是位于某个位置，你可以使用2D上下文的moveTo(x, y)函数来移动这支虚拟笔。例如下面的代码：
　　这个例子将“虚拟笔”移动到(10,10)这个坐标点上。

　　lineTo()函数

　　lineTo函数用于从虚拟笔的当前位置绘制一条直线到lineTo()函数中指定的点。下面是一个例子：

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.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属性来设置绘制线条的宽度。下面是一个例子：
　　上面的例子设置绘制线条的宽度为10像素。

　　下面的例子绘制3条直线，它们的宽度分别为1,5和10。

　　当你绘制的线条宽度大于1的时候，扩展的线条宽度将平均分配在线条中心线的两侧。距离来说，如果你从(10,10)这个点绘制一条直线到(100,10)这个点，线条的宽度为10，那么，实际上是从(10,5)这个点开始绘制，然后扩展到(10,15)这个点，在水平绘制到(100,5)和(100,15)这两个点，就像是绘制一个矩形。

　　线条的线条(LINE CAP)

　　在使用路径来绘制线条的时候，你可以设置线条的线头样式。线头的样式通过2D上下文的lineCap属性来设置。它有三个可选值：

　　butt
　　round
　　square

　　butt样式的线头是扁平且和线正交的样式。

　　round样式的线头是一个圆角的线头，圆的半径等于线条宽度的一半。

　　square样式的线头会在线的末端绘制一个矩形。矩形的大小为：线条的宽度 X 线条的宽/2。

　　下面是几个不同线头样式的线条的例子。所有的线条的宽度都是10。最总版的一组线条的lineCap的取值为butt，中间的一组线条的lineCap的取值为round，最右边的一组线条的lineCap的取值为square。