利用循环语句随机创建矩形

1.html语句：

<script>
    (function () {
        var canvas = document.querySelector('#cavsElem');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = "1px solid #000";
        var canvasHide = document.createElement('canvas');//创建一个canvas;
        canvasHide.width = canvas.width;
        canvasHide.height = canvas.height;
        var ctxHide = canvasHide.getContext('2d');
        for (var i = 0; i < 1000; i++) {
            var r = new fun({
                x: Math.random() * 100,
                y: Math.random() * 100,
                w: Math.random() * 100,
                h: Math.random() * 100,
                rotation: Math.random() * 90,
                opacity: Math.random()
            });
            r.render(ctxHide);
        }
        ctx.drawImage(canvasHide, 0, 0);
    }());
</script>

2.js代码：

<script>
    function fun(option) {
        this._init(option);
    }
    fun.prototype = {
        _init: function (option) {
            this.x = option.x || 0;
            this.y = option.y || 0;
            this.h = option.h || 0;
            this.w = option.w || 0;
            this.rotation = option.rotation || 0;
            this.opacity = option.opacity == 0 ? 0 : option.opacity || 1;
            this.scaleX = option.scaleX || 1;
            this.scaleY = option.scaleY || 1;
            this.strokeStyle = option.strokeStyle || 'red';
            this.fillStyle = option.fillStyle || 'blue';
        },
        render: function (ctx) {
            ctx.save();
            ctx.beginPath();
            ctx.translate(this.x, this.y);
            ctx.rotate(this.rotation * Math.PI / 180);
            ctx.globalAlpha = this.opacity;
            ctx.scale(this.scaleX, this.scaleY);
            ctx.rect(0, 0, this.w, this.h);
            ctx.fillStyle = this.fillStyle;
            ctx.fill();
            ctx.strokeStyle = this.strokeStyle;
            ctx.stroke();
            ctx.restore();
        }
    }
</script>