我先简单的介绍下HTML5 新增的canvas标签， canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下图是基本绘制的步骤，需要注意的是:Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 标记。
现在我将利用这些步骤和属性做个简单的五角星，代码如下。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload=function(){var c=document.getElementById("mycanvas");//获取canvas对象var context=c.getContext("2d");//构建2d环境context.beginPath();context.moveTo(70,30);//作线的起点context.lineTo(30,140);//线的终点context.lineTo(125,70);context.lineTo(10,70);context.lineTo(100,140);context.closePath();//结束/闭合context.strokeStyle="red";//线的颜色context.stroke();//线的输出context.beginPath();context.moveTo(200,30);context.lineTo(160,140);context.lineTo(257,70);context.lineTo(140,70);context.lineTo(231,140);context.closePath();//结束/闭合context.fillStyle="gold";//填充的背景色context.fill()//填充}</script></head><boby><canvas id="mycanvas" style="width:300px;height:150px; background:black;"></canvas></boby></html>
效果图如下（其中一个是线性一个是填充的）：
好了，今天分享到这啦，依旧是元气满满的一天，加油！
