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