canvas学习笔记【2021.10.29】

2021/10/29 23:09:50

编程Tag： canvas function text 小球 random ctx 29 2021.10

本文主要是介绍canvas学习笔记【2021.10.29】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

今天跟着B站up主老板汽水加糖，学习了用canvas线性小球。

split()方法 按值分割字符串为数组的方法，如果有多个值，可以把它看成数组中的逗号。

例子：

let textArry = 'javaScript HTML PHP Canvas CSS ES6 vue React NodeJs'.split(' ');

console.log(textArry);

结果如下：

Array(9) [ "javaScript", "HTML", "PHP", "Canvas", "CSS", "ES6", "vue", "React", "NodeJs" ]

fillStyle继承问题 当你前面设置了fillStyle的时候，使用closepath（）是不会清除fillStyle的，就像用画笔粘了颜色，你清除画布是没用的，因为没有改变画笔粘的颜色。利用这个继承机制，我们可以让小球的颜色和线的颜色一致。

连线问题 这个就是有x个小球，想让每一个小球都连接在一起，那么需要从第一个小球从0开始依次递增。比如5个球，第一个连接0个，第二个连接1个。。。第五个连接4个。

完整代码如下：

!
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            width: 98vw;
            height: 98vh;
        }
    </style>
</head>

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

    let w = document.documentElement.clientWidth-6;
    let h = document.documentElement.clientHeight-6;
    canvas.width=w;
    canvas.height=h;

    //第一步封装三个函数
    //画线
    function drawLine(x1, y1, x2, y2, color) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.strokeStyle = color || '#000';
        ctx.stroke();
        ctx.closePath();
    }
    //画字
    function drawText(text, x, y) {
        ctx.font = "28px 楷体";
        //fillStyle不会因为关闭路径而消失
        ctx.textAlign = "start";
        ctx.textBaseline = "middle";
        ctx.fillText(text, x, y);
    }
    //画球
    function drawBall(x, y, r, color) {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.fillStyle = color || '#000';
        ctx.fill();
        ctx.closePath();
    }
    //创建小球类
    function random(num) {
        return parseInt(Math.random() * num);//随机整数
    }
    function ball(text) {
        //随机生成的属性
        this.x = random(1096)+52;
        this.y = random(696)+52;
        this.r = random(40) + 50;
        this.color = "#" + parseInt(Math.random() * 0xffffff).toString(16);
        this.xSpeed = random(8 - 3) + 3;
        this.ySpeed = random(7 - 2) + 2;
        //外部传入的参数
        this.text=text;
    }
    //显示小球
    ball.prototype.show = function(){
        this.run();
        drawBall(this.x, this.y, this.r, this.color);
        drawText(this.text,this.x+this.r+5,this.y);//字的颜色和球颜色一样，是因为canvas保存了上一个的fillstyle
        
    }
    //碰撞检测
    ball.prototype.run = function(){
        if(this.x-this.r<=0||this.x+this.r>=w){
            this.xSpeed=-this.xSpeed;//this少不了
        }
        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 textArry = 'javaScript HTML PHP Canvas CSS ES6 vue React NodeJs'.split(' ');
    console.log(textArry);
    //建立小球数组
    let ballArry =[];
    //创建5个小球并放在数组中
     for(var i =0;i<5;i++){
        var Ball = new  ball(textArry[i]);//记得用new创建新对象;传入text;数组还得放前面
        ballArry.push(Ball);
        Ball.show();
     }
     //更新坐标,让小球动起来
     let ballTimer = setInterval(function(){
       ctx.clearRect(0,0,w,h);
      for(var i =0;i<5;i++){
          ballArry[i].show();
      //两次for循环实现小球连线
        //原理：小球连接的个数为自身顺序-1,这可通过j来确定连接的个数
        for(var j =0;j<i;j++){
            //取出ballArry[i]前面的小球
            var frontBall = ballArry[j];
            drawLine(ballArry[i].x,ballArry[i].y,frontBall.x,frontBall.y,ballArry[i].color);
        }
    }
     },20)

    
</script>

</html>

这篇关于canvas学习笔记【2021.10.29】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

canvas学习笔记【2021.10.29】

相关编程文章