代码改变世界

HTML5 Canvas开发者和读者的福音

2012-03-27 12:25 【当耐特】 阅读(...) 评论(...) 编辑 收藏

演示

今天看到可见即可得的编程 ,其中是在svg中实现的。理所当然,它可以搬到 canvas当中,而且支持canvas动画播放,而不是仅仅是静态的svg。效果如下所示:

Your browser does not support the canvas element.

修改颜色(fillsStyle)或者count或者angle等值试试!

 

技术实现

循环执行富文本中的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);
对于富文本框中,代码不高亮的问题,有没有什么好的想法?