溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么使用html5實現雪花效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么使用html5實現雪花效果”吧!
HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。
你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。
1.創建一個畫布（Canvas）：
<canvas id="myCanvas" width="200" height="100"></canvas>2.使用JavaScript繪制圖像：
//首先找到<canvas>元素
var c=document.getElementById("myCanvas");
//然后創建context對象
var ctx=c.getContext("2d");
//下面的兩行代碼繪制一個紅色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
設置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000。
3.Canvas 坐標
canvas 是一個二維網格。
canvas 的左上角坐標為 (0,0)
ctx.fillRect(0,0,150,75);
上面的 fillRect 方法擁有參數 (0,0,150,75)。
意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。
4.Canvas - 路徑
moveTo(x,y) 定義線條開始坐標
lineTo(x,y) 定義線條結束坐標
在canvas中繪制圓形, 我們將使用以下方法:
arc(x,y,r,start,stop)使用arc() 畫一個圓:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();1.創建一個畫布（Canvas）
var canvas =document.getElementById("canvas")
//參數 contextID 指定了您想要在畫布上繪制的類型。
//當前唯一的合法值是 "2d"，它指定了二維繪圖，
//并且導致這個方法返回一個環境對象，該對象導出一個二維繪圖 API。
var context = canvas.getContext("2d")
var w =window.innerWidth
var h =window.innerHeight
canvas.width = w;
canvas.height =h;2.創建雪花的對象數組
var count =200 //雪花的個數
var snows=[] //雪花對象數組
for (var i=0 ; i< count;i++){
snows.push({
x:Math.random()*w,//Math.random()用于生成0～1的隨機數
y:Math.random()*h,
r:Math.random()*5,
})
}3.繪制雪花樣式
function draw(){
context.clearRect(0,0,w,h)
context.beginPath()
for(var i=0; i<count;i++){
var snow = snows[i];//遍歷每一片雪花
context.fillStyle ="rgb(255,255,255)" //設置雪花的樣式
context.shadowBlur=10;
context.shadowColor="rgb(255,255,255)";
//moveTo 的方法是可以移動到指定的坐標
context.moveTo(snow.x,snow.y)
// 使用canvas arc()創建一個圓形
//x，y，r：圓的中心的x坐標和y坐標，r為半徑
//0,Math.PI * 2起始弧度和結束弧度
context.arc(snow.x,snow.y,snow.r,0,Math.PI * 2)
}
//畫布填充
context.fill()
move()
}4.實現雪花飄動
function move(){
for (var i=0;i<count;i++){
var snow =snows[i];
snow.y +=(7-snow.r)/10 //從上往下飄落
snow.x+=((5-snow.r)/10)//從左到右飄落
if(snow.y>h){
snows[i]={
x:Math.random()*w,
y:Math.random()*h,
r:Math.random()*5,
}
}
}
}5.設置刷新
draw()
//每毫秒刷新一次
setInterval(draw,1)6.完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪花飄飄之使用canvas元素用于在網頁上繪制圖形。</title>
<style type="text/css">
*{
margin:0;
padding:0;
/* background-color: seagreen; */
background: url("雪人.jpg") no-repeat;
background-size:100% 100%;
}
/* .can{
filter: blur(1px);
} */
</style>
</head>
<body>
<canvas id="canvas" class="can"></canvas>
<script type="text/javascript">
//canvas 元素用于在網頁上繪制圖形。
var canvas =document.getElementById("canvas")
//參數 contextID 指定了您想要在畫布上繪制的類型。
//當前唯一的合法值是 "2d"，它指定了二維繪圖，
//并且導致這個方法返回一個環境對象，該對象導出一個二維繪圖 API。
var context = canvas.getContext("2d")
var w =window.innerWidth
var h =window.innerHeight
canvas.width = w;
canvas.height =h;
var count =200 //雪花的個數
var snows=[] //雪花對象數組
for (var i=0 ; i< count;i++){
snows.push({
x:Math.random()*w,//Math.random()用于生成0～1的隨機數
y:Math.random()*h,
r:Math.random()*5,
})
}
//繪制雪花
function draw(){
context.clearRect(0,0,w,h)
context.beginPath()
for(var i=0; i<count;i++){
var snow = snows[i];//遍歷每一片雪花
context.fillStyle ="rgb(255,255,255)" //設置雪花的樣式
context.shadowBlur=10;
context.shadowColor="rgb(255,255,255)";
//moveTo 的方法是可以移動到指定的坐標
context.moveTo(snow.x,snow.y)
// 使用canvas arc()創建一個圓形
//x，y，r：圓的中心的x坐標和y坐標，r為半徑
//0,Math.PI * 2起始弧度和結束弧度
context.arc(snow.x,snow.y,snow.r,0,Math.PI * 2)
}
//畫布填充
context.fill()
move()
}
//雪花飄動
function move(){
for (var i=0;i<count;i++){
var snow =snows[i];
snow.y +=(7-snow.r)/10 //從上往下飄落
snow.x+=((5-snow.r)/10)//從左到右飄落
if(snow.y>h){
snows[i]={
x:Math.random()*w,
y:Math.random()*h,
r:Math.random()*5,
}
}
}
}
draw()
//每毫秒刷新一次
setInterval(draw,1)
</script>
</body>
</html>到此，相信大家對“怎么使用html5實現雪花效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
