HTML5标签canvas制作平面图
摘要：
HTML5规范已经完成了，互联网上已经有数不清的站点使用了HTML5。从现在开始研究HTML5，本文是自己在学习canvas过程中的记录，以备后需。
历史：
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。canvas标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
浏览器：
从图中可以看出IE9+都支持canvas。
API：
使用前，首先需要新建一个canvas网页元素。如下：
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器版本太低，不支持canvas！ 3 </canvas>
如果浏览器不支持canvas标签，页面上就会显示‘您的浏览器版本太低，不支持canvas！’。每个canvas元素都有一个方法--getContext方法，返回一个用于在画布上绘图的环境。
1 var canvas = document.getElementById('myCanvas'); 2 canvas.getContext(contextID);
参数：
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
返回值：
返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。
在画图之前先讲下坐标，每一个图的原点坐标(0,0)在图的左上角，x轴正方向水平向右，y轴正方向水平向下。
Demo：
1、线
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); // 开始 9 ctx.moveTo(20, 20); // 设置线的起点，坐标为(20,20) 10 ctx.lineTo(100, 100); // 设置线的终点，坐标为(100,100) 11 ctx.lineWidth = 5; // 设置线宽 12 ctx.strokeStyle = "#CC0000"; // 设置线的颜色 13 ctx.stroke(); // 进行线的着色 14 } 15 </script>
注意：moveTo和lineTo方法可以多次使用。最后可以用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，也可以使用一次lineto方法来封闭图形。
2、三角形
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); //开始 9 ctx.lineWidth=3; //边框的宽度 10 ctx.moveTo(0,350); //三角型的顶点 11 ctx.lineTo(100,250); //三角型的顶点 12 ctx.lineTo(200,300); //三角型的顶点 13 ctx.closePath(); //可选步骤，关闭绘制的路径 14 ctx.strokeStyle = "#CC0000"; //设置线的颜色 15 ctx.stroke(); //边着色 16 } 17 </script>
3、正方型
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.moveTo(10,10); 10 ctx.lineTo(100,10); 11 ctx.lineTo(100,100); 12 ctx.lineTo(10,100); 13 ctx.lineTo(10,10); 14 ctx.strokeStyle="#CC0000"; 15 ctx.lineWidth=3; 16 ctx.stroke(); 17 } 18 </script>
4、矩形
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.fillStyle = '#CC0000'; //设置矩形的填充色 9 ctx.fillRect(50, 50, 200, 100); //fillRect(x, y, width, height),矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高 10 } 11 </script>
5、空心矩
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.lineWidth = 5; 9 ctx.strokeStyle="#CC0000"; 10 ctx.strokeRect(10,10,200,100); //strokeRect(x, y, width, height),矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高 11 ctx.stroke(); 12 } 13 </script>
清楚填充矩形一部分
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.fillStyle = '#CC0000'; 9 ctx.fillRect(50, 50, 200, 100); 10 ctx.clearRect(100,50,50,50);//clearRect(x, y, width, height),清除矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高 11 } 12 </script>
6、圆形
填充圆
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.arc(60, 60, 50, 0, Math.PI*2, true); //ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false） 10 ctx.fillStyle = "#CC0000"; 11 ctx.fill(); 12 } 13 </script>
空心圆
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.arc(60, 60, 50, 0, Math.PI*2, true); 10 ctx.lineWidth = 5; 11 ctx.strokeStyle = "#CC0000"; 12 ctx.stroke(); 13 } 14 </script>
7、绘制文本
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.font = "Bold 20px 雅黑"; // 设置字体 9 ctx.textAlign = "left"; // 设置对齐方式 10 ctx.fillStyle = "#CC0000"; // 设置填充颜色 11 ctx.fillText("你好！", 10, 50); // fillText(string, x, y)文本内容、起点的x坐标、y坐标 12 ctx.strokeStyle = '#CC0000'; 13 ctx.strokeText("你好！", 10, 100); // 绘制空心字 14 } 15 </script>
注意：fillText和strokeText方法不支持文本断行
8、渐变色
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var grd=ctx.createLinearGradient(0,0,170,0);// createLinearGradient(x1, y1, x2, y2)x1和y1是起点坐标，x2和y2是终点坐标。通过不同的坐标值，可以生成从上至下、从左到右的渐变等等。 9 grd.addColorStop(0,"black");// addColorStop(stop,color)stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。color在结束位置显示的 CSS 颜色值 10 grd.addColorStop("0.3","magenta"); 11 grd.addColorStop("0.5","blue"); 12 grd.addColorStop("0.6","green"); 13 grd.addColorStop("0.8","yellow"); 14 grd.addColorStop(1,"red"); 15 ctx.fillStyle=grd; 16 ctx.fillRect(20,20,150,100); 17 } 18 </script>
圆形渐
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var grd=ctx.createRadialGradient(75,50,5,90,60,100);//createRadialGradient(x0,y0,r0,x1,y1,r1);x0渐变的开始圆的x坐标，y0 渐变的开始圆的y坐标，r0开始圆的半径，x1渐变的结束圆的x坐标，y1渐变的结束圆的y坐标，r1结束圆的半径 9 grd.addColorStop(0,"red"); 10 grd.addColorStop(1,"white"); 11 // Fill with gradient 12 ctx.fillStyle=grd; 13 ctx.fillRect(10,10,150,100); 14 } 15 </script>
边框渐变
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var gradient=ctx.createLinearGradient(0,0,170,0); 9 gradient.addColorStop("0","magenta"); 10 gradient.addColorStop("0.5","blue"); 11 gradient.addColorStop("1.0","red"); 12 13 // 用渐变进行填充 14 ctx.strokeStyle=gradient; 15 ctx.lineWidth=5; 16 ctx.strokeRect(20,20,150,100); 17 } 18 </script>
9、设置阴影
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.shadowOffsetX = 10; // 设置水平位移 9 ctx.shadowOffsetY = 10; // 设置垂直位移 10 ctx.shadowBlur = 5; // 设置模糊度 11 ctx.shadowColor = "#cc2111"; // 设置阴影颜色 12 ctx.fillStyle = "#CC0000"; 13 ctx.fillRect(10,10,200,100); 14 } 15 </script>
附录：
颜色、样式和阴影
| 属性 | 描述 |
|---|---|
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
| shadowColor | 设置或返回用于阴影的颜色 |
| shadowBlur | 设置或返回用于阴影的模糊级别 |
| shadowOffsetX | 设置或返回阴影距形状的水平距离 |
| shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 创建线性渐变（用在画布内容上） |
| createPattern() | 在指定的方向上重复指定的元素 |
| createRadialGradient() | 创建放射状/环形的渐变（用在画布内容上） |
| addColorStop() | 规定渐变对象中的颜色和停止位置 |
线条样式
| 属性 | 描述 |
|---|---|
| lineCap | 设置或返回线条的结束端点样式 |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型 |
| lineWidth | 设置或返回当前的线条宽度 |
| miterLimit | 设置或返回最大斜接长度 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 创建矩形 |
| fillRect() | 绘制“被填充”的矩形 |
| strokeRect() | 绘制矩形（无填充） |
| clearRect() | 在给定的矩形内清除指定的像素 |
路径
| 方法 | 描述 |
|---|---|
| fill() | 填充当前绘图（路径） |
| stroke() | 绘制已定义的路径 |
| beginPath() | 起始一条路径，或重置当前路径 |
| moveTo() | 把路径移动到画布中的指定点，不创建线条 |
| closePath() | 创建从当前点回到起始点的路径 |
| lineTo() | 添加一个新点，然后在画布中创建从该点到最后指定点的线条 |
| clip() | 从原始画布剪切任意形状和尺寸的区域 |
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
| bezierCurveTo() | 创建三次方贝塞尔曲线 |
| arc() | 创建弧/曲线（用于创建圆形或部分圆） |
| arcTo() | 创建两切线之间的弧/曲线 |
| isPointInPath() | 如果指定的点位于当前路径中，则返回 true，否则返回 false |
转换
| 方法 | 描述 |
|---|---|
| scale() | 缩放当前绘图至更大或更小 |
| rotate() | 旋转当前绘图 |
| translate() | 重新映射画布上的 (0,0) 位置 |
| transform() | 替换绘图的当前转换矩阵 |
| setTransform() | 将当前转换重置为单位矩阵。然后运行 transform() |
文本
| 属性 | 描述 |
|---|---|
| font | 设置或返回文本内容的当前字体属性 |
| textAlign | 设置或返回文本内容的当前对齐方式 |
| textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
| 方法 | 描述 |
|---|---|
| fillText() | 在画布上绘制“被填充的”文本 |
| strokeText() | 在画布上绘制文本（无填充） |
| measureText() | 返回包含指定文本宽度的对象 |
图像绘制
| 方法 | 描述 |
|---|---|
| drawImage() | 向画布上绘制图像、画布或视频 |
像素操作
| 属性 | 描述 |
|---|---|
| width | 返回 ImageData 对象的宽度 |
| height | 返回 ImageData 对象的高度 |
| data | 返回一个对象，其包含指定的 ImageData 对象的图像数据 |
| 方法 | 描述 |
|---|---|
| createImageData() | 创建新的、空白的 ImageData 对象 |
| getImageData() | 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 |
| putImageData() | 把图像数据（从指定的 ImageData 对象）放回画布上 |
合成
| 属性 | 描述 |
|---|---|
| globalAlpha | 设置或返回绘图的当前 alpha 或透明值 |
| globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存当前环境的状态 |
| restore() | 返回之前保存过的路径状态和属性 |
| createEvent() | |
| getContext() | |
| toDataURL() |
