1.1、创建canvas元素
<canvas id="canvas" width="800" height="600">不支持Canvas（当浏览器不支持时会显示出来）</canvas>
1.2、获取、配置canvas元素
（1）、获取创建的canvas元素：
document.getElementById('canvas')
（2）、canvas元素上面绘制图象：
①、首先必须获取canvas环境上下文：canvas.getContext(画布上绘制的类型)
Ⅰ、2d ：表示2维
Ⅱ、experimental-webgl：表示试验版3维
Ⅲ、webgl ：表示3维
//获取画布元素 var canvas=document.getElementById('canvas'); //绘图的上下文 var context=canvas.getContext('2d');
（3）、canvas属性：
①、设置canvas宽：context.width=1204;
②、设置canvas高：context.heigth=768;
1.3、画线：
（1）、方法
| 属性 | 说明 |
|---|---|
| context.moveTo(x,y) | 把画笔移动到x,y坐标，建立新的子路径。（起始位置） |
| context.lineTo(x,y) | 建立上一个点到x,y坐标的直线，如果没有上一个点，则等同于moveTo(x,y)，把（x,y）添加到子路径中。（启动/终点） |
| context.stroke() | 描绘子路径（开始画线） |
| context.closePath() | 如果当前子路径是打开的，就关闭它。否则把子路径中的最后一个点和路径中的第一个点连接起来，形成闭合回路。 |
| context.beginPath() | 清空子路径，一般用于开始路径的创建。在几次循环地创建路径的过程中，每次开始创建时都要调用beginPath函数。 |
| context.fill() | 执行填充 |
（2）、属性：
context.lineWidth=10 //设置线宽 context.strokeStyle="blue" //设置线的颜色 context.fillStyle="lightgreen" //设置填充颜色
1.4、绘制矩形：
| 属性 | 说明 |
|---|---|
| context.strokeRect(x,y,width,height) | 以x,y为左上角，绘制宽度为width,高度为height的矩形。 |
| context.fillRect(x,y,width,height) | 以x,y为左上角，填充宽度为width,高度为height的矩形。 |
| context.clearRect(x,y,width,height) | 清除以x,y为左上角，宽度为width,高度为height的矩形区域。 |
1.5、绘制圆弧
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
(1)、arc方法用来绘制一段圆弧路径：
| 参数 | 说明 |
|---|---|
| x,y | 圆心位置 |
| radius | 半径 |
| startAngle | 起始弧度 |
| endAngle | 终止弧度来 (Math.PI=180° Math.PI*2=360°【一周】) |
| anticlockwise | 指定旋转方向：如果为 true 就是逆时针，false 则为顺时针 |
1.6、绘制图像：
| 属性 | 说明 |
|---|---|
| context.drawImage(image,x,y) | 把image图像绘制到画布上x,y坐标位置。 |
| context.drawImage(image,x,y,w,h) | 把image图像绘制到画布上x,y坐标位置，图像的宽度是w,高度是h。 |
| context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) | 截取image图像以sx,sy为左上角坐标，宽度为sw,高度为sh的一块矩形区域绘制到画布上， 以dx,dy坐标位置，图像宽度是dw,高度是dh。其中image可以是htmlImageElement元素，htmlcanvasElement元素，htmlVideoElement元素 |
1.7、绘制文字：
（1）、函数
| 属性 | 说明 |
|---|---|
| context.fillText(text,x,y,[maxWidth]) | 在canvas上填充文字，text是绘制的文字，x,y分别表示绘制在canvas上的横，纵坐标最后一个参数可选，表示显示文字的最大宽度，防止文字显示溢出。 |
| context.strokeText(text,x,y,[maxWidth]) | 在canvas上描边文字，参数的意义同fillText |
（2）、属性：
| 说明 | 例 |
|---|---|
| 获取画布元素 | var canvas=document.getElementById("id"); |
| 绘图的上下文 | var context=canvas.getContext(画布上绘制的类型) |
| 设置线宽 | context.lineWidth=10; |
| 设置线的颜色 | context.strokeStyle="blue"; |
| 设置填充颜色 | context.fillStyle="lightgreen"; |
| 设置字体 | context.font;【例：context.font='italic bolder 48px 黑体';】 |
| 设置旋转坐标原点 | context.translate(500,500); |
| 旋转度数 | context.rotate(Math.PI); |
二、WebGL（3D绘图标准）
1、下载：three.js等
三、二次贝塞尔曲线及三次贝塞尔曲线：
1、二次贝塞尔曲线：quadraticCurveTo(cp1x, cp1y, x, y) 【cp1x,cp1y为一个控制点，x,y为结束点。】
2、三次贝塞尔曲线：bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)【cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。】
四、动画
context.save(); //保存save以上context对象设置的属性值 context.restore();//恢复到先前保存在context对象上的所有属性值
实现动画效果的非常重要的API：window.requestAnimationFrame(callback)