canvas繪制萬花筒效果(代碼分享)
更新時間:2017年01月20日 15:12:01 作者:web卿年
本文主要分享了canvas繪制萬花筒效果的示例代碼。具有一定的參考價值,下面跟著小編一起來看下吧
話不多說,請看代碼:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>萬花筒</title> <style> canvas{ background:#eee; } </style> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); var cobj = canvas.getContext("2d"); var arr = []; var t=setInterval(function(){ cobj.clearRect(0,0,600,600); for(var i=0;i<arr.length;i++){ cobj.save(); cobj.translate(300,300); cobj.scale(arr[i].scales,arr[i].scales); cobj.rotate(arr[i].angle*Math.PI/180); cobj.fillStyle = arr[i].color; cobj.fillRect(arr[i].num,arr[i].num,30,30); cobj.restore(); } },50); setInterval(function(){ for(var i=0;i<arr.length;i++){ if(arr[i].num<=0){ arr.splice(i,1); continue; } arr[i].angle+=2; arr[i].num-=0.2; arr[i].scales-=0.002; if(arr[i].scales<=0.2){ arr[i].scales=0.2; } } },50); setInterval(function(){ var rect = {angle:0,num:150,scales:1,color:"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"}; arr.push(rect); },600); } </script> </head> <body> <canvas width="600" height="600" id="canvas"></canvas> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
JavaScript基于擴展String實現(xiàn)替換字符串中index處字符的方法
這篇文章主要介紹了JavaScript基于擴展String實現(xiàn)替換字符串中index處字符的方法,涉及javascript使用substr方法針對字符串進行替換操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-06-06JS中實現(xiàn)簡單Formatter函數(shù)示例代碼
JS沒有提供方便使用的Formatter函數(shù),用字符拼接的方式看起來混亂難讀,下面是JS簡單實現(xiàn)版本(沒有嚴(yán)格測試)2014-08-08js實現(xiàn)select二級聯(lián)動下拉菜單
這個是簡單也是最基本的下拉框聯(lián)動的示例,這個示例主要針對那些只有二級聯(lián)動,且第一級是固定的選項,第二級的內(nèi)容也比較簡單,不刷新的聯(lián)動,感興趣的小伙伴們可以參考一下2016-04-04JavaScript使用performance實現(xiàn)查看內(nèi)存
這篇文章主要為大家詳細介紹了JavaScript如何使用performance實現(xiàn)查看內(nèi)存,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03Javascript中的window.event.keyCode使用介紹
我們之前發(fā)過不少關(guān)于event.keyCode相關(guān)的文章,大家都可以參考下。2011-04-04JS響應(yīng)鼠標(biāo)點擊實現(xiàn)兩個滑塊區(qū)間拖動效果
這篇文章主要介紹了JS實現(xiàn)的兩個滑塊區(qū)間拖動效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2015-10-10