快捷導(dǎo)航

Canvas實現(xiàn)動態(tài)的雪花效果

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

本文主要分享Canvas實現(xiàn)動態(tà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);//清除畫布區(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>

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

您可能感興趣的文章:

相關(guān)文章

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