canvas（2D上下文绘制路径）

1、除了具备基本绘图能力的2D上下文，<canvas>还建议了一个名为WebGL的3D上下文。

2、基本用法：要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持<canvas>元素，就会显示这些信息。例如：

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

3、要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext()方法并传入上下文的名字。传入“2

d”，就可以取得2D上下文对象。

4、在使用canvas元素之前，首先要检测getContext（）方法是否存在，这一点非常重要。

5、使用toDataURL（）方法，可以导出在canvas元素上绘制的图像。

6、2D上下文的坐标开始于canvas元素的左上角，原点坐标是（0，0）。

7、2D上下文的两种基本绘图操作是填充和描边。操作的结果取决于两个属性：fillStyle和strokeStyle。这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是“＃000000”。

8、矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形有关的方法包括fillRect（）、strokeRect（）和clearRect（）。这三个方法都能接收4个参数：矩形的x坐标、矩形的y坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

9、fillRect（）方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle属性指定。

10、strokeRect（）方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle属性指定。

11、clearRect（）方法用于清除画布上的矩形区域。本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。通过绘制形状然后再清除指定区域，就可以生成有意思的效果，例如把某个形状切掉一块。

12、绘制路径：2D绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复杂的形状和线条。要绘制路径，首先必须调用beginPath（）方法，表示要开始绘制新路径。然后，再通过调用下列方法来实际地绘制路径。

＊ arc(x, y, radius, startAngle, endAngle, counterclockwise):以（x，y）为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算，值为false表示按顺时针方向计算。

＊ arcTo(x1, y1, x2, y2, radius):从上一点开始绘制一条弧线，到（x2，y2）为止，并且以给定的半径radius穿过（x1，y1）。

＊ bezierCurveTo(c1x, c1y, c2x, c2y, x, y):从上一点开始绘制一条曲线，到（x，y）为止，并且以（c1x，c1y）和（c2x，c2y）为控制点。

＊ lineTo(x, y):从上一点开始绘制一条直线，到（x，y）为止。

＊ moveTo(x, y):将绘图游标移动到（x，y），不画线。

＊ quadraticCurveTo(cx, cy, x, y):从上一点开始绘制一条二次曲线，到（x，y）为止，并且以（cx，cy）为控制点。

＊ rect(x, y, width, height):从点（x，y）开始绘制一个矩形，宽度和高度分别由width和height指定。这个方法绘制的是矩形路径，而不是strokeRect（）和fillRect（）所绘制的独立的形状。

创建了路径后，接下来有几种可能的选择。如果想绘制一条连接到路径起点的线条，可以调用closePath（）。如果路径已经完成，你想用fillStyle填充它，可以调用fill（）方法。另外，还可以调用stroke（）方法对路径描边，描边使用的是strokeStyle。最后还可以调用clip（），这个方法可以在路径的创建一个剪切区域。

13、在2D绘图上下文中，路径是一种主要的绘图方式，因为路径能为要绘制的图形提供更多控制。由于路径的使用很频繁，所以就有了一个名为isPointInPath（）的方法。这个方法接收x和y坐标作为参数，用于在路径被关闭之前确定画布上的某一点是否位于路径上。

2D上下文中的路径API已经非常稳定，可以利用它们结合不同的填充和描边样式，绘制出非常复杂的图形来。

 

转载于:https://www.cnblogs.com/honey920/p/5306261.html