溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5實(shí)現(xiàn)下雪實(shí)例

發(fā)布時(shí)間：2020-07-05 09:09:14 來(lái)源：網(wǎng)絡(luò) 閱讀：661 作者：dingzhaoqiang 欄目：移動(dòng)開(kāi)發(fā)

下雪實(shí)例


知識(shí)點(diǎn)：

  1. canvas畫布

  2. 數(shù)組

  3. 繪畫函數(shù)

    

    

效果：

HTML5實(shí)現(xiàn)下雪實(shí)例

源碼：

------------------------------

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>下雪</title>
  <style>
*{padding:0;margin:0}
html{overflow:hidden}
  </style>
 </head>
 <body>
<canvas id="canvas" ></canvas>
<audio src="http://dx.sc.chinaz.com/Files/DownLoad/sound1/201210/2178.mp3" autoplay loop/>
<audio src="http://dx.sc.chinaz.com/Files/DownLoad/sound1/201205/1430.mp3" autoplay loop/>
<script type="text/javascript">
window.onload = function(){
//獲取畫布對(duì)象
var canvas = document.getElementById("canvas");
//獲取畫布的上下文
var context =canvas.getContext("2d");
//獲取瀏覽器屏幕的寬度和高度
var w = window.innerWidth;
var h = window.innerHeight;
//設(shè)置canvas的寬度和高度
canvas.width = w;
canvas.height = h;
//1：如何產(chǎn)生雪花,一個(gè)圓 ,arc(x,y,r,start,end)
//初始化雪花數(shù)量
var num = 200;
//雪花數(shù)組
var snows = [];
for(var i=0;i<num;i++){
//x,y圓心掉的坐標(biāo)位置，r代表圓的半徑，d每個(gè)圓的每個(gè)圓之間的間距，c代表的顏色
var r = randColor();
snows.push({
x:Math.random()*w,
y:Math.random()*h,
r:Math.random()*10,
d:Math.random()*num
});
};
//繪畫的函數(shù)
function draw(){
context.clearRect(0,0,w,h);
context.beginPath();
for(var i=0;i<num;i++){
var snow = snows[i];
context.fillStyle = "rgba(255,255,255,0.9)";
context.moveTo(snow.x,snow.y);
context.arc(snow.x,snow.y,snow.r,0,Math.PI*2);
}
context.fill();
//掉落
drop();
};
var angle = 0;
function drop()
{
angle += 0.01;
for(var i = 0; i < num; i++){
var p = snows[i];
//記住兩個(gè)公式：Math.sin(弧度)返回是一個(gè)0 1 -1 的數(shù)字
//math.cos(1 0 -1 ) 自由體，
p.y += Math.cos(angle+p.d) + 1 + p.r*0.625;
p.x += Math.sin(angle) * 8 ;
//如果雪花到了邊界，進(jìn)行邊界處理
if(p.x > w+5 || p.x < -5 || p.y > h){
if(i%4 > 0) {
snows[i] = {x: Math.random()*w, y: -10, r: p.r, d: p.d};
}else{
//控制方向
if(Math.sin(angle) > 0){
snows[i] = {x: -5, y: Math.random()*h, r: p.r, d: p.d};
}else{
snows[i] = {x: w+5, y: Math.random()*h, r: p.r, d: p.d};
}
}
}
}
};
//執(zhí)行和調(diào)用函數(shù)
draw();
setInterval(draw,10);
//隨機(jī)顏色
function randColor(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
};
};
</script>
 </body>
</html>

HTML5實(shí)現(xiàn)下雪實(shí)例

HTML5實(shí)現(xiàn)下雪實(shí)例

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手