欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Canvas绘制飞机飞行

程序员文章站 2022-05-30 09:26:35
...

运用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绘制动画

上一篇： 【Dart】入门01-变量

下一篇： 中药“中毒”需要辨证救治

推荐阅读