canvas练手

最新推荐文章于 2024-09-30 15:23:15 发布

染星_

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量95

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_67813526/article/details/124400846

版权

本文主要探讨了如何利用HTML5的canvas元素进行前端图形绘制，通过JavaScript实现动态交互效果，加强了对canvas基本操作的理解和应用。

摘要由CSDN通过智能技术生成

<!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>
        #circle {
            /* width: 500px;
            height: 500px; */
            display: block;
            margin: 0 auto;
            box-sizing: border-box;
            border: 2px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas id="circle" width="500px" height="500px"></canvas>
    <script>
        /**@type {HTMLCanvasElement}*/
        var canvas = document.querySelector('#circle');
        var ctx = canvas.getContext('2d');

        var w = 500,
            h = 500;

        function Ball() {
            this.x = Math.random() * 440 + 60;
            this.y = Math.random() * 440 + 60;
            this.r = Math.random() * 60;
            this.c = 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' +
                parseInt(Math.random() * 255) + ')';
            this.xspeed = Math.random() * 10 + (-5);
            this.yspeed = Math.random() * 8 + (-4);
        };

        //创造小球
        Ball.prototype.creat = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            ctx.fillStyle = this.c;
            ctx.fill();
        };

        //小球移动
        Ball.prototype.move = function() {
            ctx.beginPath();
            //判断小球是否离开画布可视区，若离开则改变运动方向
            if (this.xspeed + this.x <= this.r || this.xspeed + this.x >= 500 - this.r) {
                this.xspeed = -this.xspeed;
            }
            if (this.yspeed + this.y <= this.r || this.yspeed + this.y >= 500 - this.r) {
                this.yspeed = -this.yspeed;
            }
            this.x = this.x + this.xspeed;
            this.y = this.y + this.yspeed;
        };
        //创建一个小球数组
        var ballArr = [];
        for (var i = 0; i < 100; i++) {
            var ball = new Ball();
            ballArr.push(ball);
            console.log(ball)
            ball.creat();
        };
        setInterval(function() {
            ctx.clearRect(0, 0, w, h);
            for (var j = 0; j < ballArr.length; j++) {
                var ball = ballArr[j];
                ball.move();
                ball.creat();
            }
        }, 30);
        // console.log(ballArr);
    </script>
</body>

</html>