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); 
 

对于富文本框中，代码不高亮的问题，有没有什么好的想法？