全宽画布动画

Full width canvas animation

本文关键字:动画 布动画      更新时间:2024-07-20

请帮我制作"画布"动画以下是示例:http://codepen.io/anon/pen/jqxVOR?editors=0010

我怎样才能使它全屏显示(最重要的)而不是像素化?

以下代码:

    function initPlasma()
    {
        /* MATH FUNCTIONS ------------------------------ */
        function MathUtil() {}
        MathUtil.getDistance = function ( a, b ) {
            return Math.abs( Math.sqrt(a*a + b*b) );
        };
        MathUtil.randRangeDecimel = function ( min, max ) {  
            return Math.random() * ( max - min ) + min;
        };
        /* GRID CELL CLASS ------------------------------ */
        var Cell = function( x, y, w, h ) {
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
        }
        Cell.prototype.update = function( r, g, b ) {
            this.r = r;
            this.g = g;
            this.b = b;
            this.draw();
        };
        Cell.prototype.draw = function() {
            if( !plasma ) return;
            // get color, based on distance 
            var ctrlPt1 = MathUtil.getDistance( this.x - plasma.controlPoints[0].x, this.y - plasma.controlPoints[0].y );
            var ctrlPt2 = MathUtil.getDistance( this.x - plasma.controlPoints[1].x, this.y - plasma.controlPoints[1].y );
            var ctrlPt3 = MathUtil.getDistance( this.x - plasma.controlPoints[2].x, this.y - plasma.controlPoints[2].y );
            var rVal = .5+.5*Math.sin(this.r) * Math.cos(ctrlPt1/100) * Math.cos(ctrlPt2/100) * Math.sin(ctrlPt3/100);
            var gVal = .2+.5*Math.sin(this.g) * Math.sin(ctrlPt1/100) * Math.sin(ctrlPt2/100) * Math.sin(ctrlPt3/100);
            var bVal = .2+.5*Math.cos(this.b) * Math.sin(ctrlPt1/100) * Math.cos(ctrlPt2/100) * Math.sin(ctrlPt3/100)
            // draw pixel to canvas
            plasma.context.fillStyle = "rgb("+ Math.round( 127 + rVal * 255 ) +","+ Math.round( 127 + gVal * 255 ) +","+ Math.round( 127 + bVal * 255 ) +")"; 
            plasma.context.fillRect ( this.x, this.y, this.w, this.h );  
        };

        /* CONTROL POINT CLASS ------------------------------ */
        var ControlPoint = function( canvasW, canvasH ) {
            // create random x,y starting point 
            this.incX = MathUtil.randRangeDecimel( 0, 2 * Math.PI );
            this.incY = MathUtil.randRangeDecimel( 0, 2 * Math.PI );
            // create random x,y oscillating speed 
            this.incXSpeed = MathUtil.randRangeDecimel( .01, .05 );
            this.incYSpeed = MathUtil.randRangeDecimel( .01, .05 );
            // store center point to oscillate around
            this.centerX = canvasW / 2;
            this.centerY = canvasH / 2;
        }
        ControlPoint.prototype.update = function() {
            // increment oscillating based on randomly-calculated speed
            this.incX += this.incXSpeed;
            this.incY += this.incYSpeed;
            // update coordinate
            this.x = this.centerX + this.centerX * Math.sin( this.incX );
            this.y = this.centerY + this.centerY * Math.sin( this.incY );
        };

        /* PLASMA CLASS ------------------------------ */
        var Plasma = function() {
            this.COLS = 50;
            this.ROWS = 50;
            this.CANVAS_W = 700;
            this.CANVAS_H = 700;
            this.FPS = 1000/30;
            this.NUM_CONTROL_POINTS = 3;
            this.startR = MathUtil.randRangeDecimel(0,2*Math.PI);
            this.startG = MathUtil.randRangeDecimel(0,2*Math.PI);
            this.startB = MathUtil.randRangeDecimel(0,2*Math.PI);
            this.startIncR = MathUtil.randRangeDecimel(.001,.05);
            this.startIncG = MathUtil.randRangeDecimel(.001,.05);
            this.startIncB = MathUtil.randRangeDecimel(.001,.05);
            this.incR = MathUtil.randRangeDecimel(.0001,.001);
            this.incG = MathUtil.randRangeDecimel(.0001,.001);
            this.incB = MathUtil.randRangeDecimel(.0001,.001);
            this.canvas;
            this.context;
            this.grid;
            this.buildStage();
            this.createGrid();
            this.createControlPoints();
            this.addSaveFunctionality();
            var self = this;
            setInterval( function(){ self.update(); }, this.FPS );
        };
        Plasma.prototype.buildStage = function() {
            // create and attach canvas element
            this.canvas = document.createElement('canvas');
            this.canvas.width = this.CANVAS_W;
            this.canvas.height = this.CANVAS_H;
            document.body.appendChild( this.canvas );
            // store graphical context
            this.context = this.canvas.getContext("2d");
        };
        Plasma.prototype.createGrid = function() {
            // calculate "pixel" size
            var boxW = this.CANVAS_W / this.COLS;
            var boxH = this.CANVAS_H / this.ROWS;
            // create 2D array of grid cells
            this.grid = new Array( this.COLS );
            for( var i = 0; i < this.COLS; i++ ) {
                this.grid[ i ] = new Array( this.ROWS )
                for( var j = 0; j < this.ROWS; j++ ) {
                    this.grid[ i ][ j ] = new Cell( i * boxW, j * boxH, boxW, boxH );
                }
            }
        };
        Plasma.prototype.createControlPoints = function() {
            this.controlPoints = [];
            for ( var i = 0; i < this.NUM_CONTROL_POINTS; i++ ) {
                this.controlPoints.push( new ControlPoint( this.CANVAS_W, this.CANVAS_H ) );
            }
        };
        Plasma.prototype.addSaveFunctionality = function() {
            var self = this;
            this.canvas.addEventListener("click", function(e) { 
                window.open( self.canvas.toDataURL("image/jpeg") ); 
            }, false);
        };
        Plasma.prototype.update = function() {
            // increment the starting colors
            this.startR += this.startIncR;
            var curR = this.startR;
            this.startG += this.startIncG;
            var curG = this.startG;
            this.startB += this.startIncB;
            var curB = this.startB;
            // update control points
            for ( var i = 0; i < this.NUM_CONTROL_POINTS; i++ ) {
                this.controlPoints[i].update();
            }
            // increment grid cells and draw to canvas
            for (var i = 0; i < this.COLS; i++) {
                for (var j = 0; j < this.ROWS; j++) {
                    // send new base color to cells
                    this.grid[i][j].update( curR, curG, curB );
                    // increment color as we traverse the grid
                    curR += this.incR;
                    curG += this.incG * 3;
                    curB += this.incB;
                }
            }
        };

        // kick off the plasma controller
        var plasma = new Plasma();     
    }

对于全屏,我使用这种风格:

<style>
    html, document, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        border: 0;
        overflow: hidden; /*  Disable scrollbars */
        display: block;  /* No floating content on sides */
    }
    #c {
      position: fixed; left: 0px; top: 0px;
    }
</style>

在我使用id为"c"的画布元素的地方:

 <canvas id='c'>

我用叉子叉了你的电笔:http://codepen.io/anon/pen/PNebmy

关于像素:我不确定,但像素效应不是伴随着等离子体出现的吗?