这段 HTML 代码创建了一个包含画布元素的页面，用于绘制一个动态的草地场景，其中包含摇摆的草叶和一个稻草人图像。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
body {
margin: 0;
padding: 0;
display: grid;
place-items: center;
height: 100dvh;
}
#grass {
display: block;
margin: 0 auto;
background-color: lightblue;
image-rendering: pixelated;
border-radius: 20px;
}
</style>
</head>
<body>
<canvas id="grass" width="500" height="400"></canvas>
<script>
const canvasElement = document.getElementById("grass");
const canvasContext = canvasElement.getContext("2d");
canvasContext.imageSmoothingEnabled = false;
let grassBlades = [];
let amplitude = 1.6;
let speed = 0.05;
let offset = 1;
const puppetImage = new Image();
puppetImage.src = 'https://png.pngtree.com/png-vector/20220611/ourmid/pngtree-scarecrow-straw-straw-man-clipping-path-vector-png-image_37165776.png';
function drawBlade(
startX,
startY,
controlPointX1,
controlPointY1,
controlPointX2,
controlPointY2,
endX,
endY,
swayAmount
) {
canvasContext.beginPath();
canvasContext.moveTo(startX, startY);
canvasContext.bezierCurveTo(controlPointX1, controlPointY1, controlPointX2, controlPointY2, endX, endY);
canvasContext.strokeStyle = "green";
canvasContext.lineWidth = 3;
canvasContext.stroke();
}
function drawGrassScene() {
canvasContext.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasContext.drawImage(puppetImage, 150, 120, canvasElement.width / 2, canvasElement.height / 1.5);
if (grassBlades.length === 0) {
for (let i = 0; i < 350; i++) {
const randomX = Math.random() * canvasElement.width;
const startY = canvasElement.height;
const controlPointX1 = randomX - Math.random() * 30;
const controlPointY1 = startY - Math.random() * 100;
const controlPointX2 = randomX + Math.random() * 30;
const controlPointY2 = startY - Math.random() * 150;
const endX = randomX;
const endY = startY - Math.random() * 200;
const randomSway = Math.random() * 0.5 - 0.25;
grassBlades.push({
startX: randomX,
startY,
controlPointX1,
controlPointY1,
controlPointX2,
controlPointY2,
endX,
endY,
swayAmount: randomSway
});
}
}
for (let i = 0; i < grassBlades.length; i++) {
const blade = grassBlades[i];
blade.controlPointX1 += Math.sin(offset) * amplitude;
blade.controlPointX2 += Math.sin(offset + 1) * amplitude;
blade.endX += Math.sin(offset + 0) * amplitude;
drawBlade(
blade.startX,
blade.startY,
blade.controlPointX1,
blade.controlPointY1,
blade.controlPointX2,
blade.controlPointY2,
blade.endX,
blade.endY,
blade.swayAmount
);
}
offset += speed;
requestAnimationFrame(drawGrassScene);
}
puppetImage.onload = drawGrassScene;
</script>
</body>
</html>
HTML 结构
- canvas grass：定义一个画布元素，用于绘制图形，宽度为 500 像素，高度为 300 像素，ID 为“grass”.
CSS 样式
- body 样式：设置页面的边距为 0，使用 grid 布局和 place-items: center 使内容居中显示，页面高度为动态视口高度 100dvh.
- #grass 样式：定义画布元素的样式，使其居中显示，背景颜色为浅蓝色，图像渲染方式为像素化 image-rendering: pixelated，边角为圆形 border-radius: 20px.
JS
- 获取画布元素和上下文，禁用图像平滑.
- 定义变量 grassBlades 用于存储草叶数据，amplitude、speed 和 offset 用于控制草叶的摇摆效果.
- 创建一个 Image 对象并设置其源为稻草人图像的 URL.
- drawBlade 函数：绘制单个草叶，使用贝塞尔曲线.
- drawGrassScene 函数：绘制整个草地场景.清除画布内容.绘制稻草人图像.如果草叶数组为空，则生成随机草叶数据.遍历草叶数组，更新草叶的控制点和终点坐标，绘制草叶.更新 offset 值，使用 requestAnimationFrame 递归调用 drawGrassScene 函数，实现动画效果.
- 当稻草人图像加载完成后，调用 drawGrassScene 函数开始绘制场景.