Hello大家好，好久没有更新了，最近在忙一些其他的事，今天说一下画布canvas，下面是我的代码，实现了一个点从画布的（0,0）到（canvas.width，canvas.height）的一个实现其中我在canvas里面加了一个背景，你们只需要把你们的图片放在上面即可实现一小段代码的运行，好久没有说知识点了！！慢慢会来的。打算更一些计网和数据库，暑假说吧！我是：
爱吃鸡爪zi！
话不多说，代码如下：建议从draw函数看起走
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
font-family: Arial, sans-serif;
border: 2px solid #000;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
canvas {
border: 1px solid #000;
width: 80%;
height: 50%;
}
.buttons {
margin-top: 20px;
}
button {
margin: 0 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>路径安全活动展示</h1>
<canvas id="myCanvas"></canvas>
<div class="buttons">
<button id="backButton">返回上一级</button>
<button id="refreshButton">刷新</button>
<button id="stopButton">停止动画</button>
</div>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 设置画布的宽度和高度
canvas.width = 400;
canvas.height = 400;
// 创建一个新的Image对象
var backgroundImage = new Image();
// 设置Image对象的src属性为你的图片URL
backgroundImage.src = '../img/bg1.png';
// 在图片加载完成后，绘制图片到画布上
backgroundImage.onload = function() {
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
};
// 在图片加载完成后，绘制图片到画布上
backgroundImage.onload = function() {
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
};
var obstacles = [
{x:100 ,y:0 , size:15},
{ x: 50, y: 50, size: 10 },
{ x: 100, y: 100, size: 10 },
{x:180 ,y:100 , size:15},
{ x: 150, y: 150, size: 10 },
{x:170 ,y:210 , size:15},
{x:250 ,y:210 , size:15},
{x:250 ,y:260 , size:15},
{x:380 ,y:260 , size:15}
];
var redCircle = {
x: 10,
y: 10,
speed: 0.6,
direction: 'right'
};
var animationRunning = true;
var redCircleVisible = true;
function drawObstacles() {
for (var i = 0; i < obstacles.length; i++) {
var obstacle = obstacles[i];
ctx.fillStyle = 'black';
ctx.fillRect(obstacle.x, obstacle.y, obstacle.size, obstacle.size);
}
}
function drawRedCircle() {
if (redCircleVisible) {
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(redCircle.x, redCircle.y, 10, 0, Math.PI * 2);
ctx.fill();
}
}
function updateRedCirclePosition() {
if (redCircle.direction === 'right') {
redCircle.x += redCircle.speed;
if (redCircle.x >= canvas.width - 10) {
redCircle.x = canvas.width - 10;
redCircle.direction = 'down';
}
} else if (redCircle.direction === 'down') {
redCircle.y += redCircle.speed;
if (redCircle.y >= canvas.height - 10) {
redCircle.y = canvas.height - 10;
redCircleVisible = false;
animationRunning = false;
alert("红色点已到达右下角！");
}
}
for (var i = 0; i < obstacles.length; i++) {
var obstacle = obstacles[i];
if (
redCircle.x < obstacle.x + obstacle.size &&
redCircle.x + 10 > obstacle.x &&
redCircle.y < obstacle.y + obstacle.size &&
redCircle.y + 10 > obstacle.y
) {
if (redCircle.direction === 'right') {
redCircle.direction = 'down';
} else if (redCircle.direction === 'down') {
redCircle.direction = 'right';
}
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
drawObstacles();
drawRedCircle();
updateRedCirclePosition();
}
function animate() {
if (animationRunning) {
draw();
requestAnimationFrame(animate);
}
}
animate();
// 按钮事件处理函数
document.getElementById('backButton').addEventListener('click', function() {
window.history.back();
});
document.getElementById('refreshButton').addEventListener('click', function() {
window.location.reload();
});
document.getElementById('stopButton').addEventListener('click', function() {
animationRunning = false;
alert("动画已停止");
});
</script>
</body>
</html>
其中，没有使用什么算法，// 设置Image对象的src属性为你的图片URL
backgroundImage.src = '../img/bg1.png';把这个的src换为自己的即可。下面是我的运行截图：
