有的人可能听说过html5,在html5中新增了很多标签，其中就有Canvas,那么问题来了，什么是 canvas呢?

HTML5 <canvas> 元素可被用来通过JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画【来源于MDN的说明】。

注意：<canvas> 标签只是图形容器，必须需要使用脚本来绘制图形。

接下来我们一起画一个canvas：

首先，先创建一个画布（Canvas）：

注意: 默认情况下 <canvas> 元素没有边框和内容。

• HTML：宽300, 高200

<canvas id="myCan" width="300" height="200" style="border: 1px solid black"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:可以在HTML页面中使用多个 <canvas> 元素.

第二，我们使用 JavaScript 来绘制图像：

在这里我们需要知道一个事情，canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成：

• JavaScript:

1.找到 <canvas> 元素:
var can=document.getElementById("myCan");
2.创建 context 对象：
    //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var c=can.getContext("2d");
3.设置fillStyle属性可以是CSS颜色，渐变，或图案。
    //fillStyle 默认设置是黑色。
c.fillStyle="red";
    //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
c.fillRect(100,50,100,100);

效果图：

接下来，第三步，关于Canvas 的坐标：

其实，canvas 是一个二维的网格，它的左上角坐标为 (0,0)

上面刚刚使用js写的 fillRect 方法拥有参数 (100,50,100,100)，它的意思是说：想要在画布上绘制 100x100 的矩形，从坐标点(100,50)开始 。

坐标示意图：

第四步，Canvas 的路径

我们可以使用以下两种方法，在Canvas上画线：

• moveTo(x,y) 定义线条开始坐标

• lineTo(x,y) 定义线条结束坐标

示例：

HTML：宽100, 高100

<canvas id="myCan" width="100" height="100" style="border: 1px solid black"></canvas>

JavaScript:

//定义开始坐标(50,50), 和结束坐标 (100,100)。然后使用 stroke() 方法来绘制线条:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.stroke();

效果图：