突然对canvas画布有了兴趣写两个小动画demo,
一个是自由落体动画,带反弹的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<style>
.tu {
width: 800px;
height: 800px;
}
</style>
<body>
<div class="tu">
<canvas id="canvas" style="width: 100%;height: 100%;" width="900" height="900"></canvas>
</div>
</body>
<script>
let el = document.getElementById("canvas");
let cxt = el.getContext("2d");
let time = 0;
let dian = [];
setInterval(getD, 10)
function getD() {
// let ct = new Date().getTime();
time++;
if (Math.random() * 50 < 3) {
dian.push({
x: Math.floor(Math.random() * 850 + 25),
time: time,
d: Math.floor(Math.random() * 10 + 6),
w: 0,
v: 0,
fx: true,
ft: Math.random()*0.7 + 1.2
})
}
cxt.clearRect(0, 0, 900, 900)
let nw = []
dian.forEach(d => {
d.v = (d.v + (d.fx ? 0.08 : -0.08));
if (d.v < 0) {
d.v = 0
d.fx = true;
// d.w =0;
} else {
let tw = d.v + (d.fx ? -0.04 : 0.04);
d.w = d.w + (d.fx ? tw : -tw);
if (d.w > (900 - d.d)) {
d.w = (900 - d.d);
d.v = d.v / d.ft
d.fx = false;
}
}
if (d.v === 0 && d.w > (900 - d.d)-1) {
return
}
nw.push(d)
})
cxt.fillStyle = "#ad7c7c";
nw.forEach(d => {
cxt.beginPath();
// cxt.fillRect(d.x, g[time - d.time], d.d, d.d);
cxt.arc(d.x + d.d / 2, d.w + d.d / 2, d.d / 2, 0, Math.PI * 2, true)
cxt.closePath();
cxt.fill()
})
dian = nw;
}
</script>
</html>
另一个是奔跑的火柴人
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hcr</title>
<style>
.tu {
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div class="tu">
<canvas id="canvas" style="width: 100%;height: 100%;" width="900" height="900"></canvas>
</div>
</body>
<script>
let el = document.getElementById("canvas");
let cxt = el.getContext("2d");
let time = 0;
setInterval(getD, 10)
// getD()
function getD() {
cxt.clearRect(0, 0, 900, 900)
time++;
// let ct = new Date().getTime();
cxt.fillStyle = "#ad7c7c";
// cxt.beginPath();
// cxt.arc(100,100,20, 0, Math.PI * 2, true)
// cxt.closePath();
// cxt.fill()
cxt.beginPath()
cxt.arc(300,300,30, 0, Math.PI*2 , true)
cxt.fill()
cxt.beginPath()
let c = Math.sqrt(300*300 + 330*330)
let d = Math.asin(330/c);
let xc = Math.sqrt(286*286 + 450*450)
let xd = Math.asin(450/xc);
let temp = time%50;
let jd = 0
if (temp <=25){
jd = temp
}
if (temp >25){
jd = 50 - temp
}
jd = jd *3
cxt.rotate(jd*Math.PI/180);
let number = Math.sin(d - jd*Math.PI/180);
let cn = Math.cos(d - jd*Math.PI/180);
sou(c*cn,c*number)
jiao(xc* Math.cos(xd - jd*Math.PI/180)+14,xc* Math.sin(xd - jd*Math.PI/180)-150)
cxt.rotate(((360 - 2*jd)*Math.PI/180))
sou(c* Math.cos(d + jd*Math.PI/180),c* Math.sin(d + jd*Math.PI/180))
jiao(xc* Math.cos(xd + jd*Math.PI/180)+14,xc* Math.sin(xd + jd*Math.PI/180)-150)
cxt.rotate(jd*Math.PI/180);
// sou(3jd,3jd)
cxt.closePath()
shen(300,300)
// cxt.stroke()
cxt.fill()
}
function sou(x,y) {
// cxt.beginPath();
cxt.moveTo(x-10,y+10)
cxt.lineTo(x+10,y+10)
cxt.lineTo(x+10,y+80)
cxt.lineTo(x+40,y+90)
cxt.lineTo(x+40,y+105)
cxt.lineTo(x-10,y+90)
cxt.closePath()
}
function shen(x,y) {
// cxt.beginPath();
cxt.moveTo(x-14,y+20)
cxt.lineTo(x+14,y+20)
cxt.lineTo(x,y+150)
cxt.lineTo(x-28,y+150)
cxt.closePath()
}
function jiao(x,y) {
// cxt.beginPath();
cxt.moveTo(x-28,y+150)
cxt.lineTo(x,y+150)
cxt.lineTo(x,y+220)
cxt.lineTo(x-30,y+270)
cxt.lineTo(x-58,y+270)
cxt.lineTo(x-28,y+220)
cxt.closePath()
}
</script>
</html>