曾經我也是一個切圖頁面仔，頁面上的圖形，動畫都是靠圖片、Flash之類的完成，終于隨著前端的發展，我就想能不能有一些專業的圖形動畫繪制工具來幫助我完成這些事情，而不是用我們前端不專業的美工呢，現在我用上了svg和canvas，相對于圖片來說更靈活了。 本篇要介紹的是canvas，想要了解的同學可以訪問http://www.49028c.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()； 待續。。。
新聞熱點
疑難解答
