使用js實(shí)現(xiàn)雪花飄落效果
更新時(shí)間：2013年08月26日 09:13:13 作者：
以下是對(duì)使用js實(shí)現(xiàn)雪花飄落的效果進(jìn)行了介紹。需要的朋友可以 過來參考下
今天用html5繪布加js寫的雪花飄效果 。分享下：
<html>
<head>
<script>
function start(){
var array=new Array();
var canvas=document.getElementById("mycanvas");
var context=canvas.getContext("2d");
for(var i=0;i<50;i++){
var Showsnow=new showsnow();
array.push(Showsnow);
}
time=setInterval(function (){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<array.length;i++){
array[i].move();
array[i].draw(context);
}
},500);
}
function showsnow(){
var y=parseInt(Math.random()*50)*10;
var x=parseInt(Math.random()*80)*10;
this.draw=function(context){
context.font="50px Calibri";
context.fillText("*",x,y);
}
this.move=function(){
y+=20;
if(y>600){
y=0;
}
}
}
</script>
</head>
<body>
<input type="button" value="start" onclick="start()" />
<br/>
<canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>
</body>
</html>
復(fù)制代碼 代碼如下:
<html>
<head>
<script>
function start(){
var array=new Array();
var canvas=document.getElementById("mycanvas");
var context=canvas.getContext("2d");
for(var i=0;i<50;i++){
var Showsnow=new showsnow();
array.push(Showsnow);
}
time=setInterval(function (){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<array.length;i++){
array[i].move();
array[i].draw(context);
}
},500);
}
function showsnow(){
var y=parseInt(Math.random()*50)*10;
var x=parseInt(Math.random()*80)*10;
this.draw=function(context){
context.font="50px Calibri";
context.fillText("*",x,y);
}
this.move=function(){
y+=20;
if(y>600){
y=0;
}
}
}
</script>
</head>
<body>
<input type="button" value="start" onclick="start()" />
<br/>
<canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>
</body>
</html>
相關(guān)文章
javascript容錯(cuò)處理代碼(屏蔽js錯(cuò)誤)
本文主要介紹了javascript的容錯(cuò)處理代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了Js獲取單選框radio的幾種方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
關(guān)于JS通過google翻譯插件實(shí)現(xiàn)多語(yǔ)言版本
這篇文章主要介紹了JS通過google翻譯插件實(shí)現(xiàn)多語(yǔ)言版本,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
ES6記錄異步函數(shù)的執(zhí)行時(shí)間詳解
在這篇文章里，我會(huì)實(shí)現(xiàn)一個(gè)可重用的函數(shù)來處理 JavaScript 延時(shí)異步操作。有需要的小伙伴們可以參考借鑒，下面來一起看看。2016-08-08
這篇文章主要為大家詳細(xì)介紹了bootstrap輸入框組件使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript事件機(jī)制的剖析與優(yōu)化詳解
在現(xiàn)代前端開發(fā)中,JavaScript事件處理是一個(gè)至關(guān)重要的部分,它能夠使網(wǎng)頁(yè)與用戶交互,實(shí)現(xiàn)豐富的交互體驗(yàn),然而,對(duì)JavaScript事件機(jī)制的深入理解是開發(fā)者成為優(yōu)秀前端工程師的關(guān)鍵所在,本文將全面剖析JavaScript事件機(jī)制,需要的朋友可以參考下2023-12-12
基于js實(shí)現(xiàn)的限制文本框只可以輸入數(shù)字
本文主要介紹了js限制文本框只可以輸入數(shù)字的實(shí)例代碼，可復(fù)制直接調(diào)用函數(shù)實(shí)現(xiàn)其功能。需要的朋友可以看下2016-12-12
js實(shí)時(shí)獲取窗口大小變化的實(shí)例代碼
下面小編就為大家?guī)硪黄猨s實(shí)時(shí)獲取窗口大小變化的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
H5喚醒APP實(shí)現(xiàn)方法及注意點(diǎn)總結(jié)
目前通過H5頁(yè)面喚起App的場(chǎng)景十分常見,比如常見的分享功能,這篇文章主要給大家介紹了關(guān)于H5喚醒APP實(shí)現(xiàn)方法及注意點(diǎn)的相關(guān)資料,需要的朋友可以參考下2021-06-06
JavaScript轉(zhuǎn)換農(nóng)歷類實(shí)現(xiàn)及調(diào)用方法
農(nóng)歷是日常生活中不可或缺的一部分，它與人類的生活息息相關(guān)，從某種程度上說，它一直伴隨著我們，今天的任務(wù)是JavaScript轉(zhuǎn)換農(nóng)歷類的實(shí)現(xiàn)，感興趣的你可以千萬(wàn)不要錯(cuò)過，希望本文對(duì)你有所幫助2013-01-01