2.2.4 HTML5 Canvas绘图基础
2.2.4 HTML5 Canvas绘图基础
Canvas是HTML标准近年发展到HTML5时添加的新特性，用于在网页上高效绘图。H5 canvas绘图，与MFC(Microsoft Foundation Classes)或Visual Basic等绘图步骤类似。下例给出canvas绘制直线路径、填充及输出文本示例，HTML文本包含了一个canvas用于绘图：
1. <html lang="en">
2. <head>
3. <meta charset="UTF-8">
4. <title>CH2: Canvas Demo </title>
5. <script type="text/javascript"src="CH2CanvasBasic.js"></script>
6. </head>
7. <body>
8. <div style="position:absolute; top: 50px; left: 50px;">
9. <canvas id="canvasOne"width="600"height="400">
10. Yourbrowser does not support HTML 5 Canvas.
11. </canvas>
12. </div>
13. </body>
14. </html>
对应的js脚本文件CH2CanvasBasic.js如下：
1. window.addEventListener("load", main, false); //窗口载入结束后就执行main函数
2. //图形绘制与微软MFC类库中绘图接口类似
3. function main () {//主程序入口
4. var theCanvas = document.getElementById("canvasOne");//获取canvas实例
5. var context = theCanvas.getContext("2d");//获取2D绘图环境操作接口
6. context.stokeStyle= "red";//线条颜色设定为红色red
7.
8. context.beginPath();//开始绘制路径
9. context.moveTo(20, 10); // move to
10. context.lineTo(40,200); // line to
11. context.lineTo(140,180); // line to
12. context.stroke();//显示路径
13.
14. context.fillStyle= 'green';//设置填充颜色为绿
15. context.fillRect(90,40, 180, 90); //绘制矩形并设定其左上角坐标及长宽
16.
17. context.font= '28px microsoft yahei';//设置字体及大小
18. context.fillText('这是Canvas绘制的样本文本', 100, 30);//绘制制定文本
19. }
把这两个文本保存在硬盘，使用EDGE打开，得到如下结果：
我们这里讲解的内容较少，如有兴趣，可以参考网络上的教程。