HTML5 Canvas開發(fā)者和讀者的福音
2012-03-27 12:25 【當(dāng)耐特】 閱讀(5371) 評(píng)論(9) 收藏 舉報(bào)演示
今天看到可見即可得的編程 ,其中是在svg中實(shí)現(xiàn)的。理所當(dāng)然,它可以搬到 canvas當(dāng)中,而且支持canvas動(dòng)畫播放,而不是僅僅是靜態(tài)的svg。效果如下所示:
修改顏色(fillsStyle)或者count或者angle等值試試!
技術(shù)實(shí)現(xiàn)
循環(huán)執(zhí)行富文本中的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 }
2 function executeCode() {
3 try {
4 if (!beginTag) {
5 eval(document.getElementById('code').value);
6 }
7 } catch (e) {
8
9 }
10 }
半秒執(zhí)行一次,半秒以內(nèi)的延遲是可以接受的。這里有一個(gè)beginTag是標(biāo)志富文本中代碼的循環(huán)是否已經(jīng)開始執(zhí)行,倘若已經(jīng)開始執(zhí)行則不再執(zhí)行外部的loop。
事件監(jiān)聽:
<textarea id="code" onkeyup="restart()" rows="20" cols="70">
富文本框監(jiān)聽用戶的鍵盤事件,如果發(fā)生,則重新執(zhí)行code:
var loop;
function restart() {
beginTag = false;
clearInterval(loop);
}
function restart() {
beginTag = false;
clearInterval(loop);
}
其中該loop定義在富文本框的代碼當(dāng)中:
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);
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);
浙公網(wǎng)安備 33010602011771號(hào)