吃豆人

最新推荐文章于 2023-05-01 14:00:59 发布

雪夜里的枫叶

最新推荐文章于 2023-05-01 14:00:59 发布

阅读量55

点赞数

本文链接：https://blog.csdn.net/weixin_47675736/article/details/116694803

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            text-align: center;
        }
    </style>
</head>

<body>
    <canvas height="500" width="1000" style="background-color: blueviolet;" id="canvas"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var x = 200,
            y = 200;

        function fn(x, y) {
            // context.rotate(Math.PI * 45 / 180)
            context.beginPath();
            context.fillStyle = "yellow"
            console.log(123);
            context.arc(x, y, 100, 45 * Math.PI / 180, 315 * Math.PI / 180)
            context.lineTo(x, y)
            context.closePath();
            context.fill();
            context.stroke();
        }

        function fn1(x,y) {
            context.beginPath();
            context.fillStyle = "yellow"
            console.log(123);
            context.arc(x, y, 100, 0, Math.PI * 2)
            context.lineTo(x, y)
            context.closePath();
            context.fill();
            context.stroke();
        }

        function eat() {
            for (let i = x - (x % 100) + 230; i < 1000; i += 100) {
                context.beginPath();
                context.fillStyle = 'black';
                context.arc(i, 200, 10, 0, Math.PI * 2);
                context.fill();
            }
        }
        setInterval(function() {
            x += 30;
            context.clearRect(0, 0, 1000, 301);
            if (x / 10 % 2 == 0) {
                fn1(x,y);
                eat();
            } else {
                fn(x, y);
                eat();
            }
        }, 500)
    </script>

</body>

</html>

雪夜里的枫叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
吃豆人

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫

吃豆人

“相关推荐”对你有帮助么？