演示

今天看到可見即可得的編程 ，其中是在svg中實(shí)現(xiàn)的。理所當(dāng)然，它可以搬到 canvas當(dāng)中，而且支持canvas動(dòng)畫播放，而不是僅僅是靜態(tài)的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);

技術(shù)實(shí)現(xiàn)

循環(huán)執(zhí)行富文本中的code:

半秒執(zhí)行一次，半秒以內(nèi)的延遲是可以接受的。這里有一個(gè)beginTag是標(biāo)志富文本中代碼的循環(huán)是否已經(jīng)開始執(zhí)行，倘若已經(jīng)開始執(zhí)行則不再執(zhí)行外部的loop。

事件監(jiān)聽：

富文本框監(jiān)聽用戶的鍵盤事件，如果發(fā)生，則重新執(zhí)行code:

其中該loop定義在富文本框的代碼當(dāng)中：