前端学习笔记之canvas 太极图案
最近学习canvas，练习了一个太极图案，我在里面加了碰撞和跳跃功能！分享出来大家一起交流学习。
以下是完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>太极八卦</title>
<style>
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.can {
border: green 1px dashed;
}
</style>
</head>
<body>
<canvas class="can" width="600" height="400"></canvas>
<script>
const cans = document.querySelector(".can");
const pen = cans.getContext("2d");
const W = cans.offsetWidth;
const H = cans.offsetHeight;
const pi = Math.PI;
// pen.translate(300, 200);
function taiji(r) {
pen.save();
pen.beginPath();
pen.moveTo(0, r);
pen.arc(0, 0, r, pi / 2, -pi / 2, true);
pen.arc(0, -r / 2, r / 2, -pi / 2, pi / 2, true);
pen.arc(0, r / 2, r / 2, -pi / 2, pi / 2, false);
pen.fill();
// pen.stroke();
pen.beginPath();
pen.arc(0, 0, r, pi / 2, -pi / 2, false);
pen.stroke();
pen.beginPath();
pen.arc(0, r / 2, r / 10, 0, 2 * pi);
pen.fill();
pen.beginPath();
pen.arc(0, -r / 2, r / 10, 0, pi * 2);
pen.fillStyle = "white"
pen.fill();
pen.restore();
}
let r = 81, ang = 0, vAng = pi / 60, x = r + 1, vx = 2;
// setInterval(() => {
// pen.clearRect(0, 0, W, H);
// pen.save();
// pen.translate(300, 200);
// pen.rotate(ang += pi / 81);
// taiji(r);
// pen.restore();
// }, 35);
let y = 200, vy = 5, ay = 0.12;//球的坐标，球y轴的加速度，球x轴的加速度
let isStop = false;//是否停止标记
let isJump = false;//是否跳跃标记
function anim() {
pen.clearRect(0, 0, W, H);
pen.save();
if (x + r >= W || x - r <= 0) {
vx = -vx;
vAng = -vAng;
}
if (isJump) {
y -= (vy -= ay);
if (y >= 200) {
isJump = false;
y = 200, vy = 5;
}
}
pen.translate(x += vx, y);
pen.rotate(ang += vAng);
taiji(r);
pen.restore();
pen.moveTo(0, 200 + r);
pen.lineTo(W, 200 + r);
pen.stroke();
if (isStop) {
return;
}
requestAnimationFrame(() => { anim() });
}
anim()
document.addEventListener("keydown", function (e) {
console.log(e.which);
if (e.which === 83) {//s------>停止
if (isStop === false) {
isStop = true;
} else {
isStop = false;
anim();
}
} else if (e.which === 32) {//空格-------->跳跃
if (isJump === false) {
isJump = true;
}
}
})
</script>
</body>
</html>
