Canvas實(shí)現(xiàn)動(dòng)態(tài)的雪花效果

更新時(shí)間：2017年02月13日 14:41:05 作者：nick906

本文主要分享Canvas實(shí)現(xiàn)動(dòng)態(tài)的雪花效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

效果如下：

代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Canvas</title>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 html, body{
 height: 100%;
 }
 #myCanvas{
 background-color: #87CEEB;
 }
 </style>
</head>
<body>
 <canvas id="myCanvas" width="1000" height="600">您的瀏覽器不支持Canvas元素</canvas>
 <script type="text/javascript">
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var practicles = [];
 for (var i = 0; i < 500; i++) {//循環(huán)生成500粒
 practicles.push({
 x: Math.random()*(window.innerWidth),
 y: Math.random()*(window.innerHeight),
 vx: Math.random()-0.5,
 vy: Math.random()+0.5,
 size: Math.random()*3+1,
 color: "#FFF"
 })
 }
 function timeUpdate(){
 context.clearRect(0,0,window.innerWidth,window.innerHeight);//清除畫(huà)布區(qū)域
 var practicle;
 for (var i = 0; i < 500; i++) {
 var practicle = practicles[i];
 practicle.x += practicles[i].vx;
 practicle.y += practicles[i].vy;
 if (practicle.x<0) {practicle.x=window.innerWidth}
 if (practicle.x>window.innerWidth) {practicle.x=0}
 if (practicle.y>window.innerHeight) {practicle.y=0}
 context.beginPath();
 context.arc(practicle.x,practicle.y,practicle.size,0,Math.PI*2)
 context.closePath();
 context.fillStyle = practicle.color;
 context.fill();
 }
 }
 setInterval(timeUpdate,40);
 </script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

自己編寫(xiě)的支持Ajax驗(yàn)證的JS表單驗(yàn)證插件
創(chuàng)建一個(gè)JavaScript表單驗(yàn)證插件，可以說(shuō)是一個(gè)繁瑣的過(guò)程，涉及到初期設(shè)計(jì)、開(kāi)發(fā)與測(cè)試等等環(huán)節(jié)。實(shí)際上一個(gè)優(yōu)秀的程序員不僅是技術(shù)高手，也應(yīng)該是善假于外物的。本文介紹的這個(gè)不錯(cuò)的JavaScript表單驗(yàn)證插件，支持ajax驗(yàn)證，有需要的小伙伴可以參考下
2015-05-05
js 固定懸浮效果實(shí)現(xiàn)思路代碼
懸浮效果想必大家都不陌生吧，本文為大家介紹下使用js固定懸浮的實(shí)現(xiàn)思路及代碼，感興趣的朋友可以參考下
2013-08-08
js提交form表單,并傳遞參數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js提交form表單,并傳遞參數(shù)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
JavaScript Map實(shí)現(xiàn)原理與底層結(jié)構(gòu)詳解
哈希表（也稱為哈希表）是一種基于鍵直接訪問(wèn)內(nèi)存存儲(chǔ)位置的數(shù)據(jù)結(jié)構(gòu)。也就是說(shuō)，它通過(guò)計(jì)算一個(gè)鍵值函數(shù)來(lái)加速查找，該函數(shù)將要查詢的數(shù)據(jù)映射到表中的某個(gè)位置。該映射函數(shù)稱為散列函數(shù)，記錄數(shù)組稱為散列表
2022-09-09
JavaScript DOM 添加事件
這是我在給庫(kù)中添加事件的時(shí)候?qū)懙奶砑邮录姆椒ǎ∵@個(gè)方法實(shí)現(xiàn)了跨瀏覽器之間的方法！
2009-02-02
微信小程序頁(yè)面滾動(dòng)到指定位置代碼實(shí)例
這篇文章主要介紹了微信小程序頁(yè)面滾動(dòng)到指定位置代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
$JavaScript運(yùn)動(dòng)框架鏈?zhǔn)竭\(yùn)動(dòng)到完美運(yùn)動(dòng)(五)$
JavaScript運(yùn)動(dòng)框架鏈?zhǔn)竭\(yùn)動(dòng)到完美運(yùn)動(dòng)(五)
這篇文章主要為大家詳細(xì)介紹了JavaScript運(yùn)動(dòng)框架的第五部分，鏈?zhǔn)竭\(yùn)動(dòng)到完美運(yùn)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
JavaScript判斷FileUpload控件上傳文件類(lèi)型
在CS后臺(tái)代碼中獲取FileUpload控件上傳文件的類(lèi)型是比較容易的！那么，能否在客戶端通過(guò)JavaScript腳本判斷FileUpload上傳文件類(lèi)型呢？答案是可以的，下面通過(guò)一個(gè)小例子為大家展示
2015-09-09
jquery實(shí)現(xiàn)瀑布流效果 jquery下拉加載新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)瀑布流效果，下拉加載新數(shù)據(jù),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
Move.js入門(mén)
本文主要介紹了Move.js基礎(chǔ)知識(shí)和Move.js的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02