js动态几何背景
2023-12-13 20:40:37
1、Html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container" style="width: 100%; height: 600px">
<canvas id="canvas"></canvas>
</div>
</body>
<script>
// 创建画布和上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 设置画布尺寸
canvas.width = document.getElementById("container").clientWidth; // window.innerWidth;
canvas.height = document.getElementById("container").clientHeight; // window.innerHeight;
// 创建渐变背景色
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
// gradient.addColorStop(0, "#6495ED");
// gradient.addColorStop(1, "#FFD700");
// 定义几何图形
const shapes = [
{
x: 450,
y: 200,
dx: 1,
dy: -1,
radius: 50,
color: "rgba(255, 127, 80, 0.5)",
type: "circle",
}, // 圆形
{
x: 300,
y: 300,
dx: -2,
dy: 0.5,
width: 100,
height: 100,
color: "rgba(197, 83, 251, 0.5)",
type: "rectangle",
}, // 矩形
{
x: 500,
y: 400,
dx: 0.5,
dy: 1.5,
side: 80,
color: "rgba(123, 201, 154, 0.5)",
type: "square",
}, // 正方形
{
x: 200,
y: 200,
dx: -1,
dy: 1,
radius: 30,
color: "rgba(228, 246, 147, 0.5)",
type: "circle",
}, // 圆形
{
x: 700,
y: 200,
dx: 2,
dy: 0.5,
width: 60,
height: 100,
color: "rgba(239, 187, 231, 0.5)",
type: "rectangle",
}, // 矩形
{
x: 600,
y: 300,
dx: -1.5,
dy: 1,
side: 70,
color: "rgba(162, 235, 154, 0.5)",
type: "square",
}, // 正方形
{
x: 800,
y: 100,
dx: -1,
dy: 0.5,
side: 40,
color: "rgba(123, 214, 254, 0.5)",
type: "triangle",
}, // 三角形
];
function animate() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制背景色
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制图形
shapes.forEach((shape) => {
ctx.fillStyle = shape.color;
if (shape.type === "circle") {
ctx.beginPath();
ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
} else if (shape.type === "rectangle") {
ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
} else if (shape.type === "square") {
ctx.beginPath();
ctx.rect(shape.x, shape.y, shape.side, shape.side);
ctx.fill();
ctx.closePath();
} else if (shape.type === "triangle") {
ctx.beginPath();
ctx.moveTo(shape.x, shape.y);
ctx.lineTo(shape.x + 40, shape.y + 40);
ctx.lineTo(shape.x - 40, shape.y + 40);
ctx.fill();
ctx.closePath();
}
// 更新图形位置
shape.x += shape.dx;
shape.y += shape.dy;
// 碰撞检测和反弹
if (shape.type === "circle") {
if (
shape.x + shape.radius > canvas.width ||
shape.x - shape.radius < 0
) {
shape.dx *= -1;
}
if (
shape.y + shape.radius > canvas.height ||
shape.y - shape.radius < 0
) {
shape.dy *= -1;
}
} else if (shape.type === "rectangle") {
if (shape.x + shape.width > canvas.width || shape.x < 0) {
shape.dx *= -1;
}
if (shape.y + shape.height > canvas.height || shape.y < 0) {
shape.dy *= -1;
}
} else if (shape.type === "square") {
if (shape.x + shape.side > canvas.width || shape.x < 0) {
shape.dx *= -1;
}
if (shape.y + shape.side > canvas.height || shape.y < 0) {
shape.dy *= -1;
}
} else if (shape.type === "triangle") {
if (shape.x + shape.side > canvas.width || shape.x < 0) {
shape.dx *= -1;
}
if (shape.y + shape.side > canvas.height || shape.y < 0) {
shape.dy *= -1;
}
}
});
// 递归调用动画
requestAnimationFrame(animate);
}
animate();
</script>
</html>2、Vue?
<template>
<div id="container">
<canvas id="canvas"></canvas>
</div>
</template>
<script>
export default {
mounted() {
this.dynamicBackground();
},
methods: {
dynamicBackground() {
// 创建画布和上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 设置画布尺寸
canvas.width = document.getElementById("container").clientWidth; // window.innerWidth;
canvas.height = document.getElementById("container").clientHeight; // window.innerHeight;
// 创建渐变背景色
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
// gradient.addColorStop(0, "#6495ED");
// gradient.addColorStop(1, "#FFD700");
// 定义几何图形
const shapes = [
{
x: 450,
y: 200,
dx: 1,
dy: -1,
radius: 50,
color: "rgba(255, 127, 80, 0.5)",
type: "circle",
}, // 圆形
{
x: 300,
y: 300,
dx: -2,
dy: 0.5,
width: 100,
height: 100,
color: "rgba(197, 83, 251, 0.5)",
type: "rectangle",
}, // 矩形
{
x: 500,
y: 400,
dx: 0.5,
dy: 1.5,
side: 80,
color: "rgba(123, 201, 154, 0.5)",
type: "square",
}, // 正方形
{
x: 200,
y: 200,
dx: -1,
dy: 1,
radius: 30,
color: "rgba(228, 246, 147, 0.5)",
type: "circle",
}, // 圆形
{
x: 700,
y: 200,
dx: 2,
dy: 0.5,
width: 60,
height: 100,
color: "rgba(239, 187, 231, 0.5)",
type: "rectangle",
}, // 矩形
{
x: 600,
y: 300,
dx: -1.5,
dy: 1,
side: 70,
color: "rgba(162, 235, 154, 0.5)",
type: "square",
}, // 正方形
{
x: 800,
y: 100,
dx: -1,
dy: 0.5,
side: 40,
color: "rgba(123, 214, 254, 0.5)",
type: "triangle",
}, // 三角形
];
function animate() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制背景色
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制图形
shapes.forEach((shape) => {
ctx.fillStyle = shape.color;
if (shape.type === "circle") {
ctx.beginPath();
ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
} else if (shape.type === "rectangle") {
ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
} else if (shape.type === "square") {
ctx.beginPath();
ctx.rect(shape.x, shape.y, shape.side, shape.side);
ctx.fill();
ctx.closePath();
} else if (shape.type === "triangle") {
ctx.beginPath();
ctx.moveTo(shape.x, shape.y);
ctx.lineTo(shape.x + 40, shape.y + 40);
ctx.lineTo(shape.x - 40, shape.y + 40);
ctx.fill();
ctx.closePath();
}
// 更新图形位置
shape.x += shape.dx;
shape.y += shape.dy;
// 碰撞检测和反弹
if (shape.type === "circle") {
if (
shape.x + shape.radius > canvas.width ||
shape.x - shape.radius < 0
) {
shape.dx *= -1;
}
if (
shape.y + shape.radius > canvas.height ||
shape.y - shape.radius < 0
) {
shape.dy *= -1;
}
} else if (shape.type === "rectangle") {
if (shape.x + shape.width > canvas.width || shape.x < 0) {
shape.dx *= -1;
}
if (shape.y + shape.height > canvas.height || shape.y < 0) {
shape.dy *= -1;
}
} else if (shape.type === "square") {
if (shape.x + shape.side > canvas.width || shape.x < 0) {
shape.dx *= -1;
}
if (shape.y + shape.side > canvas.height || shape.y < 0) {
shape.dy *= -1;
}
} else if (shape.type === "triangle") {
if (shape.x + shape.side > canvas.width || shape.x < 0) {
shape.dx *= -1;
}
if (shape.y + shape.side > canvas.height || shape.y < 0) {
shape.dy *= -1;
}
}
});
// 递归调用动画
requestAnimationFrame(animate);
}
animate();
},
},
};
</script>
<style>
#container {
width: 100%;
height: 600px;
}
</style>
文章来源:https://blog.csdn.net/wuxiaoquan_520/article/details/134937064
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！