HTML5 Canvas開發者和讀者的福音

演示

今天看到可見即可得的編程 ，其中是在svg中實現的。理所當然，它可以搬到 canvas當中，而且支持canvas動畫播放，而不是僅僅是靜態的svg。效果如下所示:

Your browser does not support the canvas element.

修改顏色(fillsStyle)或者count或者angle等值試試！
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext("2d"); function taiji(x, y, radius, angle, wise) { angle = angle || 0; wise = wise ? 1 : -1; ctx.save(); ctx.translate(x, y); ctx.rotate(angle); ctx.fillStyle = '#000'; ctx.beginPath(); ctx.arc(0, 0, radius, 0, Math.PI, true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = '#fff'; ctx.arc(0, 0, radius, 0, Math.PI, false); ctx.fill(); ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = '#000'; ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false); ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = '#fff'; ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); ctx.fill(); ctx.restore(); } var angle = 0; var count = 360; loop = setInterval(function () { beginTag = true; ctx.clearRect(0, 0, canvas.width, canvas.height); taiji(200, 200, 200, Math.PI * (angle / count) * 2, true); taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false); angle = (angle + 5) % count; }, 50);

 

技術實現

循環執行富文本中的code:

 
           1         setInterval("executeCode()", 500) 
          
 
           2          
          function executeCode() { 
          
 
           3              
          try { 
          
 
           4                  
          if (!beginTag) { 
          
 
           5                     eval(document.getElementById('code').value); 
          
 
           6                 } 
          
 
           7             }  
          catch (e) { 
          
 
           8               
          
 
           9             } 
          
 
          10         }  
         

半秒執行一次，半秒以內的延遲是可以接受的。這里有一個beginTag是標志富文本中代碼的循環是否已經開始執行，倘若已經開始執行則不再執行外部的loop。

事件監聽：

< textarea  id ="code"  onkeyup ="restart()"  rows ="20"  cols ="70" >

富文本框監聽用戶的鍵盤事件，如果發生，則重新執行code:

                   var loop; 
          
         function restart() { 
          
             beginTag = false; 
          
             clearInterval(loop); 
          
         } 
         

其中該loop定義在富文本框的代碼當中：

                   loop = setInterval( 
          function () { 
          
             beginTag =  
          true; 
          
             ctx.clearRect(0, 0, c2.width, c2.height); 
          
             taiji(200, 200, 200, Math.PI * (angle / count) * 2,  
          true); 
          
             taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2,  
          false); 
          
             angle = (angle + 5) % count; 
          
         }, 50); 
         

對於富文本框中，代碼不高亮的問題，有沒有什么好的想法？