Canvas介绍

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的HTML元素。,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.

教程链接

基础用法

Canvas元素

<canvas id="tutorial" width="150" height="150"></canvas>

Canvas 的默认大小为300像素×150像素，可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。

替换内容

在<canvas>标签中提供了替换内容。不支持<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

渲染上下文

<canvas>元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

第一行通过使用 document.getElementById()方法来为<canvas>元素得到DOM对象。一旦有了元素对象，就可以通过使用它的getContext()方法来访问绘画上下文。

绘制图形

栅格

画布栅格(canvas grid)，起点为左上角（0，0）

绘制矩形

<canvas>只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。

绘制一个填充的矩形:

fillRect(x, y, width, height)

绘制一个矩形的边框:

strokeRect(x, y, width, height)

清除指定矩形区域，让清除部分完全透明:

clearRect(x, y, width, height)

绘制路径

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()

通过线条来绘制图形轮廓。

fill()

通过填充路径的内容区域生成实心的图形。

// 绘制三角形
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}

moveTo(x, y)

将笔触移动到指定的坐标x以及y上。

当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。看一下下面的笑脸例子。我将用到moveTo()方法（红线处）的地方标记了。

线

lineTo(x, y)

绘制一条从当前位置到指定x以及y位置的直线。

圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

arcTo(x1, y1, x2, y2, radius)

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

矩形

rect(x, y, width, height)

绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。

组合使用

// 封装的一个用于绘制圆角矩形的函数.

function roundedRect(ctx, x, y, width, height, radius){
  ctx.beginPath();
  ctx.moveTo(x, y + radius);
  ctx.lineTo(x, y + height - radius);
  ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
  ctx.lineTo(x + width - radius, y + height);
  ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
  ctx.lineTo(x + width, y + radius);
  ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
  ctx.lineTo(x + radius, y);
  ctx.quadraticCurveTo(x, y, x, y + radius);
  ctx.stroke();
}

Path2D对象

用来缓存或记录绘画命令，这样你将能快速地回顾路径。

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}