canvas学习day1——让矩形运动起来，构造函数的作用

最新推荐文章于 2023-05-19 14:50:18 发布

熊熊举高高

最新推荐文章于 2023-05-19 14:50:18 发布

阅读量294

点赞数

文章标签： canvas java php

本文链接：https://blog.csdn.net/weixin_41571938/article/details/116036651

版权

让矩形运动起来
非常简单，其实就是画一个矩形然后擦除，再画一个位移变动的矩形，不断重复即可。这里可以直接把绘制方法改成直接调用绘制矩形的JS API

<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        // 构造函数
        function JuXing( ctx, startX, startY, width, height, lineWidth, strokeStyle ) {
            this.ctx = ctx;
            this.startX = startX;
            this.startY = startY;
            this.width = width;
            this.height = height;
            this.lineWidth = lineWidth;
            this.strokeStyle = strokeStyle;
        }

        // 给原型添加一个绘制方法
        JuXing.prototype.draw = function() {
            this.ctx.beginPath();

            this.ctx.moveTo( this.startX, this.startY );
            this.ctx.lineTo( this.startX + this.width, this.startY );
            this.ctx.lineTo( this.startX + this.width, this.startY + this.height );
            this.ctx.lineTo( this.startX, this.startY + this.height );
            this.ctx.closePath();

            this.ctx.lineWidth = this.lineWidth;
            this.ctx.strokeStyle = this.strokeStyle;

            this.ctx.stroke();
        }

        // 创建一个实例
        var juxing = new JuXing( ctx, 10, 10, 60, 60, 4, 'deeppink' );
        juxing.draw();

        // 不断的清除画布，绘制新的矩形，产生运动效果
        setInterval(function() {
            ctx.clearRect( 0, 0, cvs.width, cvs.height );
            juxing.startX += 2;
            juxing.draw();
        }, 50);

    </script>
</body>

今天看到这样一个例子的时候，觉得挺奇怪的，为什么上面代码要这么写，而不是这样写

var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        // 封装一个绘制矩形的函数
        function juXing( startX, startY, width, height, lineWidth, strokeStyle ) {

            ctx.moveTo( startX, startY );
            ctx.lineTo( startX + width, startY );
            ctx.lineTo( startX + width, startY + height );
            ctx.lineTo( startX, startY + height );
            ctx.closePath();

            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = strokeStyle;

            ctx.stroke();
        }

        juXing( 10, 10, 60, 60, 4, 'deeppink' );

        // 放了防止重绘之前的路径，所以先把之前的路径清除掉
        ctx.beginPath();
        juXing( 100, 10, 100, 100, 6, 'skyblue' );

我想表达的是，为什么要第一个例子的时候要有构造函数出现，直接像第二个例子省去构造函数即可
构造函数的作用就是在生成一个实例，一个对象的时候，顺便对变量初始化。在第一个例子里面大可不必这样
思考并且参照很多资料，才理解。在一开始的话，是把所有变量都初始化，不紧紧包括JuXing.prototype.draw函数里面要使用到的变量，同时还有其他函数要使用到的变量也一并初始化。
举个简单的例子饭店做饭他直接把牛排，虾，🐟都准备好（也就是咋们说的初始化变量，构造函数的作用）那么等到来的客人A想吃牛排(drawA函数调用变量牛排)，客人B想吃虾(drawB函数调用变量虾的时候)，就不用临时再去初始化变量