时间过的很快，总是那么的不够用，一年又将逝去，新的一年又即将开始。回顾一年内失去的很多，但同时得到的也很多。其实，人，不可能都是一帆风顺的。曾经有人和我说过：“既然活着，就要活出点劲。不为别人，就为了自己，好好活着。”
这一年里最重要的是学到了很多新知识，跨到了自己以前从来都不清楚的一个领域，期望我在这个领域越走越远。还认识了很多新朋友，很不错的小伙伴。总之我相信，以后会越来越好的。
好了，不感叹生活了。把这两天刚弄懂的HTML5中canvas的一个简单小效果分享给大家。
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。一旦定义了路径，其他的方法，如 fill()，都是对此路径操作
首先让我们先看下效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
//创建了一个宽400高400的画板.
//canvas默认大小 300X150 背景透明
<canvas id="canvas2" width="400px" height="400px" style="border: 1px solid #111111; display: block;margin: 50px auto;"></canvas>
<script type="text/javascript">
var canvas2=document.getElementById("canvas2");
var huatu=canvas2.getContext("2d");
//画一个距X轴200，Y轴200，半径80的圆
huatu.beginPath();
huatu.arc(200,200,80,0,Math.PI*2);
huatu.fillStyle="#828282";
huatu.fill();
huatu.closePath();
//在画一个距X轴200，Y轴200，半径50的圆（同心）
//开始一个新的绘制路径
huatu.beginPath();
huatu.arc(200,200,50,0,Math.PI*2);
huatu.fillStyle="#fff";
huatu.fill();
huatu.closePath();
//画四分之一个不填充的圆，粗25，让它逆时针动起来
var b=4.5;
var teme=setInterval(function(){
huatu.beginPath();
huatu.arc(200,200,65,b,Math.PI*3/2);
huatu.strokeStyle="#0f0";
huatu.lineWidth="25";
huatu.stroke();
huatu.closePath();
b-=0.1;
if(b<=2.5){
clearInterval(teme);
}
},50);
//添加文字，让它从0%开始到30%停止；
var a=0;
var tem=setInterval(function(){
huatu.clearRect(170,180,60,50);
huatu.font="25px Arial";
huatu.fillStyle="#111111";
huatu.fillText(a+"%",180,210);
a++;
if(a>30){
clearInterval(tem);
}
},50);
</script>
</body>
</html>
<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。
我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。