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             }

         } 

半秒执行一次，半秒以内的延迟是可以接受的。这里有一个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);

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