效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body {
100%; height: 100%;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body style="position: relative;">
<canvas id="canvas" style="border: 1px solid; background-color: #000000; 100%; height: 100%;"></canvas>
<div onclick="clickCvs(event)" style="position: absolute; 100%; height: 100%;top: 0;left: 0;">
<video id="video" controls width="130" height="" style="position: absolute; bottom: 50px;right: 65px;opacity: 0;">
<source src="yougui.mp4" type="video/mp4"></source>
<source src="yougui.ogv" type="video/ogg"></source>
<source src="yougui.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="yougui.swf">
<param name="movie" value="yougui.swf" />
<param name="flashvars" value="autostart=true&file=yougui.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="yougui.webm">下载视频</a>
</video>
</div>
<script>
const video = document.getElementById('video');
const cvs = document.getElementById('canvas');
const ctx = cvs.getContext('2d');
// 初始化宽高
const screenSize = { window.screen.width, height: window.screen.height}
cvs.setAttribute('width', screenSize.width);
cvs.setAttribute('height', screenSize.height);
let isOpenDoor = false;
// function clickCvs(e) {
// isOpenDoor = true;
// video.style.opacity = 1;
// video.play();
// setTimeout(() => {
// if (video.requestFullscreen) {
// video.requestFullscreen();
// } else if (video.mozRequestFullScreen) {
// video.mozRequestFullScreen();
// } else if (video.webkitRequestFullScreen) {
// video.webkitRequestFullScreen();
// }
// }, 1500)
// }
// 随机一个坐标点
function randomPos() {
const x = Math.ceil(Math.random() * screenSize.width);
const y = Math.ceil(Math.random() * screenSize.height);
return {x, y}
}
function randomSnow() {
const p = randomPos();
const r = Math.floor(Math.random() * 3);
const dis = Math.ceil(Math.random() * 4);
const blur = 5 + Math.ceil(Math.random() * 5);
proSnow(p, r, blur);
return {p: p, r: r, dis: dis, blur: blur};
}
function proSnow(p, r, blur) {
ctx.save();
ctx.beginPath();
ctx.arc(p.x, p.y, r, 0, Math.PI * 2 * 180);
ctx.strokeStyle = '#FFF';
ctx.fillStyle = '#FFF';
ctx.stroke();
ctx.fill();
ctx.shadowBlur = blur;
ctx.shadowColor = "#FFF";
ctx.closePath();
ctx.restore(); //将变换后的坐标系恢复到之前状态
}
function proMoon() {
const sx = cvs.width / 3 * 2 - 20;
const sy = 150;
const r = 100;
ctx.save();
ctx.beginPath();
const gradient = ctx.createRadialGradient(150, 100, 50, 200, 200, 600)
//径向渐变
gradient.addColorStop(0, 'rgb(255,255,255)')
gradient.addColorStop(0.01, 'rgb(70,70,80)')
gradient.addColorStop(0.2, 'rgb(40,40,50)')
gradient.addColorStop(0.4, 'rgb(20,20,30)')
gradient.addColorStop(1, 'rgb(0,0,10)')
ctx.fillStyle = gradient
ctx.fillRect(0, 0, cvs.width, cvs.height)
ctx.fill();
ctx.closePath();
ctx.restore(); //将变换后的坐标系恢复到之前状态
}
// 画小房子
function proHouse(isOpenDoor) {
const house = {
200,
height: 400,
offsetX: 100,
offsetY: 50
}
const doorknob = {
}
ctx.save();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "#FFF";
ctx.rect(cvs.width - house.width - house.offsetX, cvs.height - house.height - house.offsetY, house.width, house.height);
ctx.strokeStyle = '#7F6A5A'
if (!isOpenDoor) {
ctx.fillStyle = '#CDA971'
} else {
ctx.fillStyle = '#FFFFFF'
}
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.restore(); //将变换后的坐标系恢复到之前状态
if (!isOpenDoor) {
// 门把
ctx.save();
ctx.beginPath();
ctx.lineWidth = 5;
const doorknobPos = {x: cvs.width - house.width - house.offsetX + house.width - 20, y: cvs.height - house.height - house.offsetY + (house.height/2)};
// console.log(doorknobPos)
ctx.arc(doorknobPos.x, doorknobPos.y, 10, 0, Math.PI * 2 / 180, true);
ctx.fillStyle = '#CDA971'
ctx.strokeStyle = '#7F6A5A'
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore(); //将变换后的坐标系恢复到之前状态
}
}
// 画夜晚的小山丘
function proHill() {
ctx.save();
ctx.beginPath();
const standY = cvs.height - 100;
ctx.moveTo(0, standY);
ctx.bezierCurveTo(cvs.width / 3, standY-80, cvs.width / 2, standY + 40, cvs.width / 1 - 330, standY+50);
ctx.lineTo(cvs.width, standY+50);
ctx.lineTo(cvs.width, cvs.height);
ctx.lineTo(0, cvs.height);
ctx.lineTo(0, standY);
const gradient = ctx.createLinearGradient(0, standY, 0, cvs.height);
//径向渐变
gradient.addColorStop(0, '#2B2B2B')
gradient.addColorStop(0.5, '#4a4a4a')
gradient.addColorStop(1, '#000000')
ctx.fillStyle = gradient;
ctx.strokeStyle = '#7F6A5A'
ctx.fill();
// ctx.stroke();
ctx.closePath();
ctx.restore(); //将变换后的坐标系恢复到之前状态
}
// 随机生产雪花
const snows = [];
for (let i = 0; i < 600; i++) {
snows.push(randomSnow());
}
// 让雪花飘起来
// setInterval(() => {
// startSnow();
// }, 60)
// 利用自带
const animationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
function start() {
ctx.clearRect(0, 0, screenSize.width, screenSize.height);
// 月亮(绘画顺序不能乱，否则会被覆盖)
proMoon(); //这个再最前面
// 话房子
proHouse(isOpenDoor);
//
proHill();
// 雪
for (const snow of snows) {
snow.p.y = snow.p.y + snow.dis;
if (snow.p.y > screenSize.height) {
snow.p.y = -10;
snow.dis = Math.ceil(Math.random() * 4);
}
proSnow(snow.p, snow.r, snow.blur);
}
animationFrame(start)
}
animationFrame(start)
</script>
</body>
</html>