<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas 面条特效</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
canvas {
display: block;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.info {
position: absolute;
bottom: 20px;
color: #666;
font-size: 12px;
}
.info a {
color: #06c;
text-decoration: none;
}
.info a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<canvas id="noodleCanvas"></canvas>
<div class="info">
面条动画特效 | 更多内容请访问: <a href="http://jrxq.100haofu.com" target="_blank">http://jrxq.100haofu.com</a>
</div>
<script>
const canvas = document.getElementById('noodleCanvas');
const ctx = canvas.getContext('2d');
// 设置画布大小为窗口大小
function resizeCanvas() {
const size = Math.min(window.innerWidth, window.innerHeight) * 0.9;
canvas.width = size;
canvas.height = size;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 面条类
class Noodle {
constructor() {
this.reset();
this.thickness = 2 + Math.random() * 3;
this.color = `hsl(${30 + Math.random() * 20}, 70%, 50%)`;
this.originalColor = this.color;
this.cooked = false;
this.cookProgress = 0;
}
reset() {
this.x = canvas.width / 2 + (Math.random() - 0.5) * 50;
this.y = canvas.height / 2 + (Math.random() - 0.5) * 50;
this.length = 50 + Math.random() * 100;
this.segments = [];
this.angle = Math.random() * Math.PI * 2;
this.speed = 0.5 + Math.random() * 1.5;
this.curviness = 0.1 + Math.random() * 0.3;
// 创建面条段
const segmentCount = 10;
for (let i = 0; i < segmentCount; i++) {
this.segments.push({
x: this.x,
y: this.y,
angle: this.angle
});
}
}
update() {
// 移动面条
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
// 边界检查
if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) {
this.reset();
}
// 更新面条段
this.segments[0].x = this.x;
this.segments[0].y = this.y;
this.segments[0].angle = this.angle;
for (let i = 1; i < this.segments.length; i++) {
const prev = this.segments[i - 1];
const segment = this.segments[i];
// 添加一些随机弯曲
const angle = segment.angle + (Math.random() - 0.5) * this.curviness;
segment.x = prev.x - Math.cos(angle) * (this.length / this.segments.length);
segment.y = prev.y - Math.sin(angle) * (this.length / this.segments.length);
segment.angle = angle;
}
// 烹饪效果
if (!this.cooked && Math.random() < 0.01) {
this.cooked = true;
}
if (this.cooked && this.cookProgress < 1) {
this.cookProgress += 0.005;
this.color = `hsl(${30 + this.cookProgress * 10}, ${70 - this.cookProgress * 20}%, ${50 + this.cookProgress * 20}%)`;
}
}
draw() {
ctx.beginPath();
ctx.moveTo(this.segments[0].x, this.segments[0].y);
for (let i = 1; i < this.segments.length; i++) {
const segment = this.segments[i];
ctx.lineTo(segment.x, segment.y);
}
ctx.lineWidth = this.thickness;
ctx.strokeStyle = this.color;
ctx.stroke();
// 绘制面条端点
ctx.beginPath();
ctx.arc(this.x, this.y, this.thickness / 2, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
}
// 碗类
class Bowl {
constructor() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.radius = canvas.width * 0.4;
this.color = '#e67e22';
this.soupColor = 'rgba(255, 215, 0, 0.3)';
}
draw() {
// 绘制汤
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius * 0.9, 0, Math.PI * 2);
ctx.fillStyle = this.soupColor;
ctx.fill();
// 绘制碗
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
// 碗的内边缘
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius * 0.9, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
ctx.lineWidth = 10;
ctx.stroke();
// 碗的外边缘
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
ctx.lineWidth = 5;
ctx.stroke();
}
contains(x, y) {
const dx = x - this.x;
const dy = y - this.y;
return dx * dx + dy * dy < this.radius * this.radius;
}
}
// 热气类
class Steam {
constructor() {
this.reset();
}
reset() {
this.x = canvas.width / 2 + (Math.random() - 0.5) * 100;
this.y = canvas.height / 2 - 50 + (Math.random() - 0.5) * 20;
this.size = 5 + Math.random() * 15;
this.speed = 0.5 + Math.random() * 1;
this.life = 1;
this.decay = 0.005 + Math.random() * 0.01;
this.alpha = 0.3 + Math.random() * 0.3;
}
update() {
this.y -= this.speed;
this.life -= this.decay;
if (this.life <= 0) {
this.reset();
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size * this.life, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha * this.life})`;
ctx.fill();
}
}
// 创建对象
const bowl = new Bowl();
const noodles = [];
const steamParticles = [];
for (let i = 0; i < 30; i++) {
noodles.push(new Noodle());
}
for (let i = 0; i < 15; i++) {
steamParticles.push(new Steam());
}
// 动画循环
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制碗
bowl.draw();
// 更新并绘制面条
noodles.forEach(noodle => {
// 检查面条是否在碗内
if (!bowl.contains(noodle.x, noodle.y)) {
// 如果不在碗内，改变方向朝向碗中心
const dx = bowl.x - noodle.x;
const dy = bowl.y - noodle.y;
noodle.angle = Math.atan2(dy, dx);
}
noodle.update();
noodle.draw();
});
// 更新并绘制热气
steamParticles.forEach(steam => {
steam.update();
steam.draw();
});
requestAnimationFrame(animate);
}
animate();
// 鼠标交互
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
// 移动碗
bowl.x = mouseX;
bowl.y = mouseY;
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
