Canvas绘图的实现：
<canvas>元素负责在页面中设定一个区域，通过JS动态地在这个区域中绘制图形。
IE9+、Firefox1.5+、Safari2+、Opera9+、Chrome、IOS版Safari以及Android版WebKit都在一定程度上支持<canvas>元素。
1、基本用法
（1）HTML部分的代码
1 /* width和height属性，指定绘图的区域的大小 */ 2 <canvas id="picture" width="200" height="200"> 3 /* 标签之间的内容在浏览器不支持<canvas>元素时显示 */ 4 A picture about apple. 5 </canvas>
<canvas>元素对应的DOM元素也有width和height属性，可随意修改。
可以通过CSS添加样式，如果不添加任何样式或不绘制任何图形，在页面上是看不到该元素的。
（2）JS部分的代码
1 var picture = document.getElementById("picture"); 2 // 确定浏览器支持<canvas>元素 3 if(picture.getContext){ 4 // 取得绘图上下文对象 5 var context = picture.getContext("2d"); 6 // ...... 7 }
（3）导出在<canvas>元素上绘制的图像
1 var picture = document.getElementById("picture"); 2 // 确定浏览器支持<canvas>元素 3 if(picture.getContext){ 4 // 取得图像的数据URL 5 var imgURL = picture.toDataURL("image/png"); 6 // 显示图像 7 // toDataURL方法接收图像的MIME类型格式作为参数，适合用来创建图像的任何上下文 8 var image = document.createElement("img"); 9 image.src = imgURL; 10 document.body.appendChild(image); 11 }
默认情况下，浏览器会将图像编码为PNG格式（除非另行指定）。
Firefox和Opera也支持基于
"image/jpeg"参数的JPEG编码格式。
注：如果绘制到画布上的图像源自不同的域，toDataURL()方法会抛出错误。
2、填充和描边
使用2D绘图上下文提供的方法，可以绘制简单的2D图形，如矩形、弧形和路径。2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是(0,0)。所有坐标值基于这个原点计算，x值越靠右越大，y值越靠下越大。
填充：用指定的样式（颜色、渐变或图像）填充图形。
描边：只在图形的边缘画线。
填充和描边操作的结果取决于两个属性：fillStyle 和 strokeStyle 。属性的值可以是字符串、渐变对象和模式对象，默认值都是 "#000000"。指定表示颜色的字符串值时，可以使用CSS中指定颜色值的任何格式：颜色名、十六进制码、rgb、rgba、hsl和hsla。
1 var picture = document.getElementById("picture"); 2 // 确定浏览器支持<canvas>元素 3 if(picture.getContext){ 4 // 取得绘图上下文对象 5 var context = picture.getContext("2d"); 6 context.strokeStyle = "red"; // 边为红色 7 context.fillStyle = "#0000ff"; // 填充颜色为蓝色 8 }
3、绘制矩形
矩形是唯一一种可以直接在2D上下文中绘制的形状。
绘制矩形相关的方法：
fillRect()：在画布上绘制的矩形会用指定的颜色填充，颜色由fillStyle属性指定；
strokeRect()：在画布上绘制的矩形会用指定的颜色描边，颜色由strokeStyle属性指定；
clearRect()：清除画布上的矩形区域，把绘制上下文中的某一矩形区域变透明。
以上3个方法都接收4个参数（单位是像素）：
矩形的x坐标；
矩形的y坐标；
矩形的宽度；
矩形的高度。
1 var picture = document.getElementById("picture"); 2 // 确定浏览器支持<canvas>元素 3 if(picture.getContext){ 4 // 取得绘图上下文对象 5 var context = picture.getContext("2d"); 6 7 // 绘制红色矩形，粉色描边，从坐标(10, 10)处开始绘制，宽和高为50像素 8 context.fillStyle = "#ff0000"; 9 context.strokeStyle = "pink"; 10 context.fillRect(10, 10, 50, 50); 11 12 // 绘制半透明的蓝色矩形，黄色描边，在第一个矩形上面绘制第二个矩形 13 context.fillStyle = "rgba(0,0,255,0.5)"; 14 context.strokeStyle = "#00ff00"; 15 context.fillRect(30, 30, 50, 50); 16 17 // 在两个矩形重叠的地方清除一个小矩形，变成透明 18 context.clearRect(40, 40, 10, 10); 19 }
设置描边相关的属性：
lineWidth属性：控制描边线条的宽度，可以是任意整数。
lineCap属性：控制线条末端的形状是平头、圆头还是方头（ "butt"、"round"或"square"）。
lineJoin属性：控制线条相交的方式是圆交、斜交还是斜接（ "round"、"bevel"或"miter"）。
