一、準備工作

本demo使用HTML5進行實現，在主流瀏覽器上運行即可。為了保證平臺兼容性，我使用了lufylegend引擎，不過渲染部分用的是原生代碼，事件、適配等用的是引擎提供的API。引擎地址：http://lufylegend.com/lufylegend

二、程序實現

本案例主要修改Main.js文件實現效果。

Main.js核心代碼如下(其中c是CanvasRenderingContext2D對象)：

for (var i = 1; i <= 60; i++) {

var angle = i * 6 / 180 * Math.PI;

var r = Math.abs(30 * (pull + Math.sin((twist * 6 * (i + timer * 2) / 180 * Math.PI))));

r = r % 60;

var d = (2 + shout) * (60 - shout * r),

x = d * Math.cos(angle),

y = d * Math.sin(angle);

c.save();

c.beginPath();

c.fillStyle = getColor();

c.globalAlpha = r / 100;

c.arc(x, y, r, 0, Math.PI * 2);

c.fill();

c.restore();

}

可以看到，我們首先通過循環創建60個圓圈，然后使用絕對值，正弦等數學計算方式來獲取每個圓圈的半徑，并根據半徑來確定x、y坐標。其中c為畫布對象，twist、shout、pull等都是運動軌跡計算時的參數，timer就是從效果開始播放后的到現在所用時間，相當于物理v-t圖中的自變量t。

至于這些參數的變化和timer的變化，我把他們放在了時間軸事件中。具體的實現代碼可以下載后參看。

三、運行效果

四、文件截圖

雙擊index.html可運行看效果。

五、其他補充

本demo的靈感來自于scratch網站上一位國外大牛的作品。我在他的創意之上進行改進得到這個demo。

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權

總結

以上是生活随笔為你收集整理的html5怎么圆圈怎么打开,HTML5动感圆圈的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。