canvas学习笔记【2021.10.26】

最新推荐文章于 2024-08-15 08:55:57 发布

轻盈的风

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量106

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/masierty/article/details/120980984

版权

今天跟着B站up主老板汽水加糖，学习了用canvas写面向对象的小球。

思路是：

先创建一个类
在类的原型对象中加入绘制小球的函数
加入让改变坐标的函数
创建一个放小球的数组
用for循环创建指定数量的随机小球
用计时器让小球们动起来

代码如下：

<!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>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        #canvas {
            display: block;
            margin: 100px auto;
            border: 5px black solid;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="1200" height="800">
        您的浏览器不支持canvas，请升级。
    </canvas>
</body>
<script>
    /** @type {HTMLCanvasElement} */
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext('2d');

    // 随机数
    let random = function (num) {
        return parseInt(Math.random() * num);//你个憨憨记得加return
    }

    // 创建一个类
    function ball() {
        //不固定初始地点
        // this.x = random(1200);
        // this.y = random(800);
        this.x = random(5) + 52;
        this.y = random(4) + 52;
        this.r = random(40) + 12;
        this.color = "#" + parseInt(Math.random() * 0xffffff).toString(16);
        this.xSpeed = random(6 - 3) + 4;
        this.ySpeed = random(5 - 2) + 3;
    }

    // 给上面的类的prototype对象加入显示小球的函数
    //定义小球显示方法
    ball.prototype.show = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
    };

    //定义小球运动方法
    let w = 1200;
    let h = 800;
    ball.prototype.update = function(){
        if(this.x-this.r<=0 ||this.x+this.r>=w){
            this.xSpeed = -this.xSpeed;
        }
        this.x = this.x +this.xSpeed;
        if(this.y-this.r<=0 || this.y+this.r>=h){
            this.ySpeed = -this.ySpeed;
        }
        this.y = this.y +this.ySpeed;
    }

    //创建一个放小球的数组
    let ballArry=[];

    //new ball().show();
    //创造小球
    for (var i = 0; i < 48; i++) {
        var balll = new ball();
        //放入小球数组
        ballArry.push(balll);//push()/向数组末尾添加一个元素，并返回新的长度
        //new ball().show();匿名引用你是找不到它的
        balll.show();
        //但是放入数组后可以通过下标遍历数组
    }

    //小球动起来
    let ballTimer = setInterval(function(){
        ctx.clearRect(0,0,w,h);
       for(var i =0;i<ballArry.length;i++){
        //清除放在for循环里只会显示第一个球
           var balll = ballArry[i];//找到它
           //更新坐标，显示小球
           balll.update();
           balll.show();//可以在show（）里面调用this.update(),封装成一个方法

       }
    },10)
</script>

</html>

轻盈的风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas学习笔记【2021.10.26】

今天跟着B站up主老板汽水加糖，学习了用canvas写面向对象的小球。思路是：先创建一个类在类的原型对象中加入绘制小球的函数加入让改变坐标的函数创建一个放小球的数组用for循环创建指定数量的随机小球用计时器让小球们动起来代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C
复制链接

扫一扫