笔记大全

HTMLcanvas矩形阵雨

更新时间：2023-10-28

第一段：需求分析

矩形阵雨是一种视觉效果，通过HTMLcanvas画布实现，是一个熟练掌握canvas的重要技能。该效果通过使用JavaScript将元素的位置、大小和行为随机设置而创建。在矩形阵雨中，矩形是元素的主要内容，而雨是元素的运动方向和变化。

第二段：代码实现

// 获取canvas对象
var canvas = document.querySelector('canvas');

// 设置canvas的宽度和高度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取画笔
var c = canvas.getContext('2d');

// 矩形阵雨代码实现
function Rect(x, y, dx, dy, width, height) {
    this.x = x;
    this.y = y;
    this.dy = dy;
    this.width = width;
    this.height = height;

    this.draw = function() {
        c.fillStyle = '#fff';
        c.fillRect(this.x, this.y, this.width, this.height);
    }

    this.update = function() {
        if (this.y > innerHeight) {
            this.y = Math.random() * -innerHeight;
            this.dy = Math.random() * 6 + 1;
        }

        this.y += this.dy;
        this.draw();
    }
}

// 创建矩形数组
var rectArray = [];
for (var i = 0; i < 1000; i++) {
    var x = Math.random() * innerWidth;
    var y = Math.random() * innerHeight;
    var dx = Math.random() * 4 - 2;
    var dy = Math.random() * 6 + 1;
    var width = Math.random() * 10 + 3;
    var height = Math.random() * 10 + 3;
    rectArray.push(new Rect(x, y, dx, dy, width, height));
}

// 动画帧函数
function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, innerWidth, innerHeight);

    for (var i = 0; i < rectArray.length; i++) {
        rectArray[i].update();
    }
}

animate();

第三段：代码分析

代码实现中，我们先获取到canvas标签，并且设置了它的宽高为浏览器视窗的宽高，这样可以保证画布尺寸与浏览器窗口大小动态匹配。之后，我们通过canvas的getContext方法获取2D绘制的上下文环境。接下来的代码实现了一个Rect构造函数，用于创建一个矩形元素，该函数包含draw和update方法，分别用于绘制和更新矩形元素。接着创建了一个矩形数组，包含1000个矩形元素，每个矩形元素都是通过Rect构造函数随机产生的。最后，我们使用canvas提供的requestAnimationFrame方法，实现了一个动画帧函数，用于不断更新并绘制矩形数组，从而实现矩形阵雨的效果。

第四段：代码规范

实现代码时需要注意代码规范，可以为自己制定一个代码规范，在开发过程中自觉遵守。以下是一些代码规范的指导建议：

命名规范：变量名、函数名、方法名和对象名应具有描述性，尽可能使用英文单词和缩写。
代码布局：为了提高代码的可读性，尽量按照代码的逻辑结构将代码格式化，使用缩进和换行等技术让代码更加易读。
注释规范：在代码开发过程中，添加注释是非常有必要的，注释应具有描述性，对代码的结构进行详细说明。
代码复用：常用的代码可以单独提取出来，作为一个单独的函数或方法，在需要的时候进行调用，从而提高代码的重用。

c语言编程笔录