曾经我也是一个切图页面仔，页面上的图形，动画都是靠图片、Flash之类的完成，终于随着前端的发展，我就想能不能有一些专业的图形动画绘制工具来帮助我完成这些事情，而不是用我们前端不专业的美工呢，现在我用上了svg和canvas，相对于图片来说更灵活了。 本篇要介绍的是canvas，想要了解的同学可以访问http://www.Vevb.com.cn/HTML5/html5_canvas.asp。 我们要做的是一个简单的提示成功或失败的图标动画（如何封装成javaScript插件将会在第二篇介绍），实际效果如下图： 
相应的完整代码
<canvas id="myCanvas" width="120px" height="120px" style="width:120px;height:120px;"> Canvas绘制弧线（打钩、打叉）动画示例</canvas><script type="text/Javascript"> //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //检测当前浏览器是否支持Canvas对象 if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象 var context = canvas.getContext("2d"); var interval = 30; var x = canvas.width/2; //圆心的x轴坐标值 var y = canvas.height/2; //圆心的y轴坐标值 var radius = 55; //圆的半径 var counterClockwise = false; var width = canvas.width,height=canvas.height; if (window.devicePixelRatio) { canvas.height = height * 4; canvas.width = width * 4; context.scale(4, 4); } drawTick(); drawfork(); function drawCircle(){ var step = 1, startAngle = 0, endAngle = 0, n = 55; // count of arc var animation = setInterval(function () { if (step <= n ) { endAngle = 0 + 2 * Math.PI / n * step; //开始一个新的绘制路径 context.beginPath(); //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线 context.arc(x, y, radius, startAngle, endAngle,counterClockwise); context.strokeStyle = "#F0A5BA"; context.lineWidth = 2; //设置线宽 //按照指定的路径绘制弧线 context.stroke(); step++; } else { clearInterval(animation); } },interval); } function drawTick(){ drawCircle(); var step1 = 1 , step2 = 1,startAngle = 0, endAngle = 0, n1 = 25,n2 = 40; var endX1 = 0, endY1 = 0; var animation1 = setInterval(function (){ if (step1 <= n1) { startX1 = 25; startY1 = 60; endX1 = startX1 + step1*1; endY1 = startY1 + step1*((80-60)/(50-25)); //开始一个新的绘制路径 context.beginPath(); context.moveTo(startX1,startY1); context.lineTo(endX1,endY1); //(50,80) //按照指定的路径绘制弧线 context.stroke(); step1 ++; } else { clearInterval(animation1); var animation2 = setInterval(function (){ if (step2 <= n2) { endX2 = endX1 + step2*1; endY2 = endY1 - step2*((80-40)/(90-50)); //开始一个新的绘制路径 context.beginPath(); context.moveTo(endX1,endY1); context.lineTo(endX2,endY2); //(90,40) //按照指定的路径绘制弧线 context.stroke(); step2 ++; } else { clearInterval(animation2); } },interval); } },interval); } function drawfork(){ drawCircle(); var step1 = 1 , step2 = 1 , n = 50; var startX1, startY1, endX1, endY1; var startX2, startY2, endX2, endY2; var animation1 = setInterval(function (){ if (step1 <= n) { startX1 = 35; startY1 = 25; endX1 = startX1 + step1*1; endY1 = startY1 + step1*((95-25)/(85-35)); //开始一个新的绘制路径 context.beginPath(); context.moveTo(startX1,startY1); context.lineTo(endX1,endY1); //(85,95) //按照指定的路径绘制弧线 context.stroke(); step1 ++; } else { clearInterval(animation1); var animation2 = setInterval(function (){ if (step2 <= n) { startX2 = 85; startY2 = 25; endX2 = startX2 - step2*1; endY2 = startY2 + step2*((95-25)/(85-35)); //开始一个新的绘制路径 context.beginPath(); context.moveTo(startX2,startY2); context.lineTo(endX2,endY2); //按照指定的路径绘制弧线 context.stroke(); step2 ++; } else { clearInterval(animation2); } },interval); } },interval); } } </script>接着我们将代码解构与详述： 一、画出空心圆：drawCircle()； 二、画出勾，再将空心圆和勾组合起来画出成功提示：drawTick()； 三、画出叉，再将空心圆和叉组合起来画出失败提示：drawfork()； 待续。。。
新闻热点
疑难解答
