Canvas动画限制图片运动范围
分享一个利用Canvas绘图的动画，并通过计算限制图片的运动范围，希望能够给大家一些启发。
基本效果如下：
实现代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Canvas动画限制图片运动范围</title>
<style>
body {
text-align: center;
}
canvas {
background: #ddd;
}
</style>
</head>
<body>
<h1>Canvas动画限制图片运动范围</h1>
<canvas id="canvas" width="500" height="500">
您的浏览器不支持Canvas标签！
</canvas>
<script>
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'images/img.png';
img.onload = function () {
// 开始绘制图片到画布上....
var x = 0;
var xDirection = 1;
var y = 0;
var yDirection = 1;
// 设置定时器
setInterval(function () {
// 清除画布上已有的内容
ctx.clearRect(0, 0, 500, 500);
// 绘制图像
ctx.drawImage(img, x, y);
// 坐标累加
x += 5 * xDirection;
// 坐标累加
y += 5 * yDirection;
// 超出右边范围
if (x >= 500 - img.width) {
// 反向运动
xDirection = -1;
// 超出左边范围
} else if (x <= 0) {
// 反向运动
xDirection = 1;
}
// 超出底部范围
if (y >= 500 - img.height) {
// 反向运动
yDirection = -1;
// 超出顶部范围
} else if (y <= 0) {
// 反向运动
yDirection = 1;
}
}, 30);
}
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/06/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
