快捷導(dǎo)航

canvas繪制萬(wàn)花筒效果（代碼分享）

更新時(shí)間：2017年01月20日 15:12:01 作者：web卿年

本文主要分享了canvas繪制萬(wàn)花筒效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

話(huà)不多說(shuō)，請(qǐng)看代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>萬(wàn)花筒</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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

canvas

相關(guān)文章

Javascript數(shù)組操作函數(shù)總結(jié)
這篇文章主要給大家匯總介紹了Javascript數(shù)組操作函數(shù),需要的朋友可以參考下
2015-02-02
js事件驅(qū)動(dòng)機(jī)制瀏覽器兼容處理方法
下面小編就為大家?guī)?lái)一篇js事件驅(qū)動(dòng)機(jī)制瀏覽器兼容處理方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
使用BootStrap建立響應(yīng)式網(wǎng)頁(yè)——通欄輪播圖（carousel）
這篇文章主要介紹了使用BootStrap建立響應(yīng)式網(wǎng)頁(yè)通欄輪播圖（carousel）的相關(guān)資料,需要的朋友可以參考下
2016-12-12
JavaScript 作用域scope簡(jiǎn)單匯總
這篇文章主要介紹了JavaScript 作用域scope簡(jiǎn)單匯總,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
全面了解JavaScript對(duì)象進(jìn)階
下面小編就為大家?guī)?lái)一篇全面了解JavaScript對(duì)象進(jìn)階。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
Bootstrap表格制作代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap表格的制作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
JavaScript實(shí)現(xiàn)煙花綻放動(dòng)畫(huà)效果
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)煙花綻放動(dòng)畫(huà)效果，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-08-08
Javascript 函數(shù)parseInt()轉(zhuǎn)換時(shí)出現(xiàn)bug問(wèn)題
天測(cè)試的測(cè)出來(lái)的。parseInt(1.13*100)，實(shí)際返回值是112，下面有個(gè)示例，大家可以看看下
2014-05-05
24個(gè)ES6方法解決JS實(shí)際開(kāi)發(fā)問(wèn)題(小結(jié))
這篇文章主要介紹了24個(gè)ES6方法解決JS實(shí)際開(kāi)發(fā)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
avalon js實(shí)現(xiàn)仿微博拖動(dòng)圖片排序
玩微博的朋友都上傳過(guò)圖像吧，當(dāng)圖片上傳后用戶(hù)是可以隨意拖動(dòng)圖片的，調(diào)整圖片的順序，那么此功能是怎么實(shí)現(xiàn)的，下面小編通過(guò)此篇文章給大家詳解基于avalon js實(shí)現(xiàn)仿微博拖動(dòng)圖片排序，需要的朋友可以參考下
2015-08-08