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="400">
您的浏览器不支持Canvas标签！
</canvas>
<script>
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'images/img.png';
// 图片加载完成
img.onload = function () {
var deg = 10;
setInterval(function () {
// 绘制前先清除画布
ctx.clearRect(0, 0, 500, 400);
// 绘制飞机——绕自己为中心旋转
// ctx.translate(250, 200);//平移画布
// ctx.rotate(deg * Math.PI / 180);//旋转画布
// ctx.drawImage(img, -250, -200);//绘制图像
// ctx.rotate(-deg * Math.PI / 180);//将画布旋转回去
// ctx.translate(-250, -200);//将画布平移回去
// deg += 10; //以累加的角度开始绘制
// 上面的代码可以简化写成下面这样，通过保存状态，后面还原状态
//绘制飞机——绕自己为中心旋转
ctx.save(); //保存绘图前的状态
ctx.translate(250, 200); //平移画布
ctx.rotate(deg * Math.PI / 180); //旋转画布
ctx.drawImage(img, -250, -200); //绘图
ctx.restore(); //还原到之前存盘的状态
deg += 10;
}, 50)
}
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/06/30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
