艺术！不是吗？【HTML5优秀代码】

最新推荐文章于 2025-08-15 09:01:53 发布

jianqi6

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/jianqi6/article/details/84058469

HTML5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas和JavaScript实现的动态龙形图案绘制过程。该程序通过递归调用绘制不同部分如翅膀、尾巴等，实现了动态效果。通过调整参数可以改变龙的形态，演示了基本的计算机图形学概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <title>Dragon Heart</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="1000">
    </canvas>
    <script src="http://files.cnblogs.com/iamzhanglei/JscexMin.js" type="text/javascript"></script>
    <script>

        function fillCircle(ctx, r) {
            ctx.beginPath();
            ctx.moveTo(r, 0);
            ctx.fillStyle = 'rgb(245,50,50)';
            ctx.arc(0, 0, r, 0, Math.PI * 2, true);
            ctx.fill();
        }

        function branch(ctx, r, d, t, a) {
            ctx.save();
            ctx.rotate(t * a);
            ctx.translate(0, -r * (1 + d));
            wing(ctx, r * d, a);
            ctx.restore();
        }

        function feather(ctx, r) {
            if (r < 3) return;
            var d = 0.85;
            ctx.rotate(-0.03 * Math.PI);
            ctx.translate(0, -r * (1 + d));
            fillCircle(ctx, r);
            feather(ctx, r * d);
        }

        function wing(ctx, r, a) {
            if (r < 2.9) return;
            fillCircle(ctx, r);
            branch(ctx, r, 0.9561, 0.03 * Math.PI, a);
            ctx.save();
            ctx.rotate(0.55 * Math.PI);
            feather(ctx, 0.8 * r);
            ctx.restore();
        }

        function tail(ctx, s, a) {
            if (s < 0.5) return;
            var d = 0.98; // decay
            fillCircle(ctx, s);
            ctx.rotate(-0.15 * a);
            ctx.translate(0, s * (1 + d));
            tail(ctx, s * d, a);
        }

        function head(ctx) {
            fillCircle(ctx, 22);

            // mouth
            ctx.save();
            ctx.translate(-15, -3);
            ctx.beginPath();
            ctx.fillStyle = "white";
            ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.restore();

            // eye
            ctx.translate(9, -4);
            ctx.beginPath();
            ctx.fillStyle = "black";
            ctx.arc(0, 0, 5, 0, Math.PI * 2, true);
            ctx.fill();

            // horn
            ctx.translate(6, -8);
            ctx.rotate(0.6 * Math.PI);
            wing(ctx, 5.5, 1.8);
        }

        function neck(ctx, s) {
            if (s < 10) { head(ctx); return; }
            var d = 0.85;
            fillCircle(ctx, s);
            ctx.save();
            ctx.rotate(-Math.PI / 2);
            ctx.translate(0, s);
            fillCircle(ctx, s / 2);
            ctx.restore();

            ctx.rotate(-0.15);
            ctx.translate(0, -s * (1 + d));
            neck(ctx, s * d);
        }
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        function draw() {
            ctx.translate(430, 230);
            ctx.scale(0.4, 0.4);
            executeAsync().start();
        }
        var i = 1;
        var executeAsync = eval(Jscex.compile("async", function () {
            while (true) {
                $await(Jscex.Async.sleep(1));
                while (true) {
                    $await(Jscex.Async.sleep(35));
                    i++;
                    ctx.fillStyle = "white";
                    ctx.fillRect(-1500, -1500, 4000, 4000);
                    ctx.save();
                    ctx.translate(0, Math.cos(i * 0.1) * 40);
                    var a = Math.sin(i * 0.1);
                    // right wing
                    ctx.save();
                    ctx.rotate(Math.PI * 0.4);
                    wing(ctx, 18, a);
                    ctx.restore();
                    // left wing
                    ctx.save();
                    ctx.scale(-1, 1);
                    ctx.rotate(Math.PI * 0.4);
                    wing(ctx, 18, a);
                    ctx.restore();
                    // tail
                    ctx.save();
                    tail(ctx, 20, Math.sin(i * 0.05));
                    ctx.restore();
                    // head
                    neck(ctx, 22);
                    ctx.restore();
                }
            }
        }));
        draw();
    </script>
</body>
</html>