html幽灵动画代码,利用HTML5实现Canvas幽灵鬼魂动画特效
时间: 2024-02-13 10:06:16 浏览: 174
以下是一个简单的HTML5 Canvas幽灵动画代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Ghost Animation</title>
<style>
canvas {
border: 1px solid black;
margin: 20px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 设置幽灵的初始位置和速度
var x = canvas.width / 2;
var y = canvas.height / 2;
var dx = 2;
var dy = -2;
// 绘制幽灵
function drawGhost() {
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.rect(x - 20, y, 40, 40);
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(x, y + 40, 20, Math.PI, Math.PI * 2);
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.closePath();
}
// 动画循环
function animate() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制幽灵
drawGhost();
// 更新位置
x += dx;
y += dy;
// 碰到边界时改变方向
if (x + dx > canvas.width - 20 || x + dx < 20) {
dx = -dx;
}
if (y + dy > canvas.height - 20 || y + dy < 20) {
dy = -dy;
}
}
// 每隔10毫秒执行一次动画循环
setInterval(animate, 10);
</script>
</body>
</html>
```
在这个代码中,我们使用了HTML5的`<canvas>`标签来绘制图形。我们通过`canvas.getContext("2d")`获取到一个2D绘图上下文,然后使用绘图上下文的方法来绘制幽灵。
我们使用`setInterval`函数来循环执行动画,每隔10毫秒执行一次`animate`函数。在`animate`函数中,我们首先清除画布,然后绘制幽灵。接着更新幽灵的位置,如果碰到边界则改变方向。最后,循环执行动画直到页面关闭。
阅读全文