canvas制作(小demo)---圆球碰壁反弹

最新推荐文章于 2022-06-27 14:05:43 发布

丸子哥哥

最新推荐文章于 2022-06-27 14:05:43 发布

阅读量974

点赞数 1

分类专栏： canvas 项目锻炼文章标签： canvas壁纸

本文链接：https://blog.csdn.net/qq_36818386/article/details/82758417

版权

项目锻炼同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

canvas

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas
        {
            border: 2px dashed brown;
        }
    </style>
</head>
<body>
<canvas width="500", height="500", id="canvas"></canvas>
</body>
<script>
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d"); //创建一个画布

    function Ball(x, y, r, color)
    {
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = color;

        this.dx = Math.random() * 10;
	    this.dy = Math.random() * 10;
        arr.push(this);
    }

    Ball.prototype.update = function ()
    {
        this.x += this.dx;
	    this.y += this.dy;

	    if(this.x > 500 - this.r || this.x < this.r)
        {
            this.dx = -this.dx;
        }

	    if(this.y > 500 - this.r || this.y < this.r)
	    {
		    this.dy = -this.dy;
	    }
    };

    Ball.prototype.render = function ()
    {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 7, false);
        ctx.fillStyle = this.color;
        ctx.fill();
    };

    var arr = [];
    setInterval(function ()
    {
    	ctx.clearRect(0, 0, 500, 500);

        for(var i = 0; i < arr.length; i++)
        {
        	arr[i].update();
        	arr[i].render();
        }
    },20);

    canvas.onmousedown = function (e) {
      new Ball(e.clientX, e.clientY, Math.random() *50, 'red');
    };
</script>
</html>