canvas 学习指南
canvas 学习指南
创建一个 canvas
<! DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta charset="utf-8" /><script type="text/javascript">window.onload = function() {//1、获取canvas对象var cnv = document.getElementById("canvas");//2、获取上下文环境对象contextvar cxt = cnv.getContext("2d");//3、开始绘制图形cxt.moveTo(50, 100);cxt.lineTo(150, 50);cxt.stroke(); }</script></head><body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray; "></canvas> </body></html>
定义宽高
如果在 CSS 样式中定义，我们使用 canvas 对象获取的宽度和高度是默认值，而不是实际的宽度和高度。这样就无法获取 canvas 对象正确的宽度和高度。获取 canvas 对象实际的宽度和高度是 Canvas 开发中最常用的操作，因此对于 Canvas 的宽度和高度我们就一定要在 HTML 属性中定义，而不是在 CSS 属性中定义。
我们可以使用 cnv.width 和 cnv.height 分别获取 Canvas 的宽度和高度，可以使用 cnv.getContext(“2d”)来获取 canvas 2D 上下文环境对象，也可以使用 toDataURL()来获取 canvas 对象产生的位图的字符串。在这里，cnv 是指 canvas 对象。
直线图形
-
多边形
可以将 moveTo()和 lineTo()配合使用来画三角形和矩形。其实在 Canvas 中，多边形也是使用 moveTo()和 lineTo()这两个方法画出来的。如果我们想要在 Canvas 中画多边形，则需要事先在草稿纸或软件中计算出多边形中各个顶点的坐标，然后再使用 moveTo()和 lineTo()在 Canvas 中画出来。跟矩形不一样，Canvas 没有专门用来绘制三角形和多边形的方法。对于三角形以及多边形，我们也是使用 moveTo()和 lineTo()这两个方法来实现。
-
一条直线
cxt.moveTo(x1, y1); cxt.lineTo(x2, y2); cxt.stroke();
(x1, y1)表示直线“起点”的坐标。moveTo 的含义是“将画笔移到该点(x1, y1)位置上，然后开始绘图”。(x2, y2)表示直线“终点”的坐标。lineTo 的含义是“将画笔从起点(x1, y1)开始画直线，一直画到终点坐标(x2, y2)”。
上面两句代码仅仅是确定直线的“起点坐标”和“终点坐标”这两个状态，但是实际上画笔还没开始“动”。因此我们还需要调用上下文对象的 stroke()方法才有效。使用 Canvas 画直线，与我们平常用笔在纸张上画直线是一样的道理，都是先确定直线起点(x1, y1)与终点(x2, y2)，然后再用笔连线（stroke()）。 -
矩形
对于绘制矩形，Canvas 还为我们提供了独立的方法来实现。在 Canvas 中，矩形分为两种，即“描边”矩形和“填充”矩形。在 Canvas 中，我们可以将 strokeStyle 属性和 strokeRect()方法配合使用来画一个“描边矩形”。 cxt.strokeStyle = 属性值； cxt.strokeRect(x, y, width, height);
（1）strokeStyle 属性 strokeStyle 属性取值有三种，即颜色值、渐变色、图案。对于 strokeStyle 取值为渐变色和图案的情况
2）strokeRect()方法 strokeRect()方法用于确定矩形的坐标，其中 x 和 y 为矩形最左上角的坐标。注意，凡是对于 Canvas 中的坐标，大家一定要根据 W3C 坐标系来理解。此外 width 表示矩形的宽度，height 表示矩形的高度，默认情况下 width 和 height 都是以 px 为单位的。在 Canvas 中，我们可以将 fillStyle 属性和 fillRect()方法配合使用来画一个“填充矩形”。
cxt.fillStyle=属性值； cxt.fillRect(x, y, width, height);
x 和 y 为矩形最左上角的坐标，width 表示矩形的宽度，height 表示矩形的高度。strokeRect()、fillRect()和 rect()都可以画矩形。这三种方法参数是相同的，不同在于实现效果方面。其中 strokeRect()和 fillRect()这两个方法在调用之后，会立即把矩形绘制出来。而 rect()方法在调用之后，并不会把矩形绘制出来。只有在使用 rect()方法之后再调用 stroke()或者 fill()方法，才会把矩形绘制出来。
x 和 y 为矩形最左上角的坐标，width 表示矩形的宽度，height 表示矩形的高度。strokeRect()、fillRect()和 rect()都可以画矩形。这三种方法参数是相同的，不同在于实现效果方面。其中 strokeRect()和 fillRect()这两个方法在调用之后，会立即把矩形绘制出来。而 rect()方法在调用之后，并不会把矩形绘制出来。只有在使用 rect()方法之后再调用 stroke()或者 fill()方法，才会把矩形绘制出来。
清空矩形
我们可以使用 clearRect()方法来清空“指定矩形区域”
曲线图形
圆形
我们可以使用 arc()方法来画一个圆
cxt.beginPath(); cxt.arc(x, y，半径，开始角度，结束角度，anticlockwise); cxt.closePath();
首先必须调用 beginPath()方法来声明“开始一个新路径”，然后才可以开始画圆。在使用 arc()方法画圆完成之后，我们还需要调用 closePath()方法来关闭当前路径。beginPath()和 closePath()一般都是配合使用的。其中，beginPath()表示“开始路径”，closePath()表示“关闭路径”
anticlockwise 是一个布尔值，当为 true 时，表示按逆时针方向绘制；当为 false 时，表示按顺时针方向绘制。anticlockwise 默认值为 false，也就是说默认情况下按顺时针方向绘制。
弧形
如果想要画弧线，常见的有两种方法：arc()、arcTo()。
//状态描述 cxt.beginPath(); cxt.arc(x, y，半径，开始角度，结束角度，anticlockwise); //描边 cxt.strokeStyle = “颜色值”; cxt.stroke();
“arc()画弧线”与“arc()画描边圆”最大的不同在于：arc()画弧线不使用 closePath()来关闭路径。这一点大家一定要区分开，因为弧线不是一个闭合图形。而 closePath()是用来绘制“封闭图形”的
可以使用 arcTo()方法来画一条弧线
cxt.arcTo(cx, cy, x2, y2, radius);
(cx , cy)表示控制点的坐标，(x2 , y2)表示结束点的坐标，radius 表示圆弧的半径。
如果我们想要画一条弧线，需要提供三个点的坐标：开始点、控制点和结束点。其中一般由 moveTo()或 lineTo()提供开始点，arcTo()提供控制点和结束点。arcTo()方法就是利用“开始点”“控制点”和“结束点”这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为 radius 的圆弧。其中，弧线的起点是“开始点所在边与圆的切点”，而弧线的终点是“结束点所在边与圆的切点”。