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>

Canvas绘制飞机飞行相关推荐

canvas绘制“飞机大战”小游戏，真香
canvas是ArkUI开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活.高效等优点,被广泛应用于UI界面开发中. 本期,我们将为大家介绍canvas组件的使用. 目录一.canvas介 ...
基于HTML5 Canvas的工控SCADA模拟飞机飞行
昨天看到一篇文章说是学习如何开飞机的,然后我就想,如果我也可以开飞机那就好玩了,每个人小时候都想做飞行员!中国飞行员太难当了,再说也不轻易让你开飞机!后来我就想如果能用 HT 开飞机那就是真的有趣了, ...
SuperMap iClient for javaScript 动态线绘制（模拟飞机飞行）
作者:程溯使用方法:SuperMap.Geometry.Point(x, y) SuperMap.Feature.Vector 实现动态线绘制模拟飞机飞行效果使用 iClient 示范代码中的bu ...
纯Shading Language绘制飞机火焰效果
为什么80%的码农都做不了架构师?>>> 上篇<纯Shading Language绘制HTML5时钟>体现了GLSL可编程性特点,但没有体现GLSL可编程出各种酷炫 ...
基于 HTML5 的 3D 飞机飞行轨道控制
前言从互联网+的概念一出来,就瞬间吸引了各行各业的能人志士,想要在这个领域分上一杯羹.现在传统工业生产行业运用互联网+的概念偏多,但是在大众创业万众创新的背景下,"互联网+"涌出 ...
用canvas画飞机大战（一步步详解附带源代码,源码和素材上传到csdn,可以免费下载）
canvas绘图该元素负责在页面中设定一个区域,然后由js动态地在这个区域中绘制图形.这个技术最早是由美国苹果公司推出的,目的是为了取代flash,很快主流浏览器都支持它. 飞机大战前面几期用ca ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等.没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Fl ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...

Canvas绘制飞机飞行

Canvas绘制飞机飞行相关推荐

最新文章

热门文章