原生原生js+canvas实现下雪效果实现下雪效果
本文实例为大家分享了js+canvas实现下雪效果的具体代码，供大家参考，具体内容如下
效果展示：
源码展示:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas下雪效果(原生js)</title>
<style>
* {
margin: 0;
padding: 0
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #222;
}
#canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<img id="imgSnow" width="0" height="0" src="xh.png" alt="雪花">
<img id="bgSnow" width="100%" height="100%" src="bj.jpg" alt="背景">
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var imgSnow = document.getElementById("imgSnow");
var bgSnow = document.getElementById("bgSnow");
var ctx = canvas.getContext('2d');
var mbody = document.querySelector("body");
canvas.width =mbody.offsetWidth;
canvas.height = mbody.offsetHeight;
var GetRandomNum = function (Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
return (Min + Math.round(Rand * Range));
}
// console.log(GetRandomNum(0, canvas.width))
var snowArray = {}; //雪花对象
var snowIndex = 0; //标识符
var setting = {
num: 30, //数量
snowSize: 20, //大小
startX: Math.random() * canvas.width, //起始横坐标
startY: 0, //起始纵坐标
vy: 0.01
评论0
最新资源