canvas 学习指南

canvas 学习指南

创建一个 canvas

定义宽高

如果在 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 的圆弧。其中，弧线的起点是“开始点所在边与圆的切点”，而弧线的终点是“结束点所在边与圆的切点”。