什么是canvas？
HTML5新增加的canvas标签，用作绘图的容器，使用JS脚本来完成绘图
canvas画布是一个矩形区域，我们可以控制其每一像素去绘制路径、矩形、圆形、字符等等的方法。
如何创建Canvas元素？
创建canvas就是向HTML5界面添加canvas
方法：
注：必须在行内修改宽高，否则会造成绘制的图形有失帧的效果
<canvas width="600" height="400" id="canvas">
画布创建好了，那么如何绘制呢？
因为<canvas>元素没有自己的绘图功能（它只是图形的容器）， 我们必须使用脚本来实际绘制图形。
getContext()方法返回一个对象，该对象提供在画布上绘制的方法和属性。
绘制过程
- 首先用JavaScript通过canvas的id来找到canvas元素：
var canvas = document.getElementById("canvas");
//获取画布对象
- 然后创建context对象：
var cxt = canvas.getContext('2d');
//getContext("2d")对象HTML5的内建对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
- 设置图形的填充颜色
cxt.fillStyle = "#ff0000"; // 设置填充颜色
- 绘制一个实心矩形 默认填充色：黑色
cxt.fillRect(x, y, w, h); // 实心矩形 坐标(x, y) 宽高w, h
- 设置边框颜色
cxt.strokeStyle = "#ff0000"; // 设置填充颜色
- 空心矩形 默认填充色：黑色
ctx.strokeRect(x, y, w, h); // 实心矩形 坐标(x, y) 宽高w, h
- 设置线条宽度
ctx.lineWidth = 10;
- 清除一个矩形区域，类似于橡皮擦
ctx.clearRect(x, y, w, h);
- 设置阴影
ctx.shadowBlur = 5; // 设置阴影模糊度
ctx.shadowColor = "#ab15fd"; // 设置阴影颜色
ctx.shadowOffsetX = 20; // 设置阴影在x轴的偏移量
ctx.shadowOffsetY = 10; // 设置阴影在y轴的偏移量
实例--矩形
由上方法我们画出一个实心矩形：
<body>
<canvas width="600" height="400" id="canvas">
<script>
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext('2d');
cxt.fillStyle = "#FFC0CB";//矩形填充颜色
cxt.fillRect(0, 0, 100, 100)；//在画布（0,0）位置画一个长100宽100的矩形
</script>
</body>
效果如下（给画布设了一个灰色背景）：
再画出一个空心矩形：
<body>
<canvas width="600" height="400" id="canvas">//绘制一个长600，宽400的画布
<script>
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext('2d');
cxt.strokeStyle="red";//边框颜色
cxt.strokeRect(200, 200, 100, 100);//在画布（200,200）位置画一个长100宽100的矩形
</script>
</body>
实例--绘制路径
步骤：
- 创建路径
context.beginPath();
- 绘制形状
context.rect(10,10,100,100);
- 绘制
context.fill();//填充（也就是实心）
context.stroke();//边框（也就是空心）
- 关闭当前路径
context.closePath();
下面我们用canvas画一个三角形：
<body>
<canvas id="canvas" width="800px" height="600px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();//开始一条路径
context.moveTo(10,10);//开始点
context.lineTo(100,10);//转折点
context.lineTo(10,100);//结束点
context.closePath();//从当前点到开始点的路径
context.lineWidth = 2;//线宽
context.fill()//填充（实心，默认黑色）
</script>
</body>
效果如下：
实例--圆形
语法：
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x、y为圆心坐标，r为圆的半径，sAngle起始角，eAngle结束角，counterclockwise可选参数，默认顺时针绘制，false
下面用此语法画一个圆：
<body>
<canvas id="canvas" width="800px" height="600px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(280,60,50,0,Math.PI * 1.8);
context.closePath();
context.stroke()
</script>
</body>
效果如下：
实例--渐变
语法：
context.createLinearGradient(x0,y0,x1,y1)，创建一个渐变对象
（x0,y0)到(x1,y1）颜色逐渐渐变
<body>
<canvas id="canvas" width="400px" height="300px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
var grad = cxt.createLinearGradient(0,0,400,300);
grad.addColorStop(0,"red");
grad.addColorStop(0.3,"yellow");
grad.addColorStop(0.6,"pink");
grad.addColorStop(1,"blue");
cxt.fillStyle = grad;
cxt.fillRect(0,0,400,300);
</script>
</body>
效果如下：
相关资料： 参考手册：HTML 5 < canvas > 标签
