使用js實現(xiàn)雪花飄落效果
更新時間：2013年08月26日 09:13:13 作者：
以下是對使用js實現(xià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>
復制代碼 代碼如下:
<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>
相關文章
本文主要介紹了javascript的容錯處理代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了Js獲取單選框radio的幾種方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了JS通過google翻譯插件實現(xiàn)多語言版本,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
在這篇文章里，我會實現(xiàn)一個可重用的函數(shù)來處理 JavaScript 延時異步操作。有需要的小伙伴們可以參考借鑒，下面來一起看看。2016-08-08
這篇文章主要為大家詳細介紹了bootstrap輸入框組件使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
在現(xiàn)代前端開發(fā)中,JavaScript事件處理是一個至關重要的部分,它能夠使網(wǎng)頁與用戶交互,實現(xiàn)豐富的交互體驗,然而,對JavaScript事件機制的深入理解是開發(fā)者成為優(yōu)秀前端工程師的關鍵所在,本文將全面剖析JavaScript事件機制,需要的朋友可以參考下2023-12-12
基于js實現(xiàn)的限制文本框只可以輸入數(shù)字
本文主要介紹了js限制文本框只可以輸入數(shù)字的實例代碼，可復制直接調用函數(shù)實現(xiàn)其功能。需要的朋友可以看下2016-12-12
下面小編就為大家?guī)硪黄猨s實時獲取窗口大小變化的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
目前通過H5頁面喚起App的場景十分常見,比如常見的分享功能,這篇文章主要給大家介紹了關于H5喚醒APP實現(xiàn)方法及注意點的相關資料,需要的朋友可以參考下2021-06-06
JavaScript轉換農(nóng)歷類實現(xiàn)及調用方法
農(nóng)歷是日常生活中不可或缺的一部分，它與人類的生活息息相關，從某種程度上說，它一直伴隨著我們，今天的任務是JavaScript轉換農(nóng)歷類的實現(xiàn)，感興趣的你可以千萬不要錯過，希望本文對你有所幫助2013-01-01