Question

我试图模仿这个网站的流畅程度：http://material.cmiscm.com/（您之前可能已经看过）

所以，我开始非常小，只是试图模仿紫色部分的渐变从盒子中消失的方式。他的渐变是对角的 - 为简单起见，我的是水平的。

但是，我的问题是我的渐变非常不稳定，即使我尝试更改RECT_INCREMENT的值

原始代码（ctrl + v＆＃39;能够）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<style>
    #canvas {
        padding: 0;
        margin: 0;
    }

    body {
        background: #6D00D0;
    }
</style>
<body>
        <canvas id="canvas" width="900" height="555">

        </canvas>
</body>
<script>

var MAX_RECT_LENGTH = 800;
var RECT_INCREMENT = 50;
var RECT_X_ORIG = 0;
var RECT_Y_ORIG = 100;
var RECT_Y_MIN = 0;
var RECT_Y_MAX = 100;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var gra = context.createLinearGradient(0, 0, 800, 0);
gra.addColorStop(0, 'rgba(229, 88, 95, .6)');
gra.addColorStop(1, 'rgba(255, 255, 255, 0)');

var path = 0;
function draw(){

    if (path < MAX_RECT_LENGTH) {
        context.beginPath();
        // 1
        context.moveTo(RECT_X_ORIG + path, RECT_Y_ORIG);    
        //console.log('1) ' + (RECT_X_ORIG + path) + ', ' + RECT_Y_ORIG);
        // 2
        path = path+RECT_INCREMENT;
        context.lineTo(RECT_X_ORIG + path, RECT_Y_ORIG);    
        //console.log('2) ' + (RECT_X_ORIG + path) + ', ' + RECT_Y_ORIG);
        // 3
        context.lineTo(RECT_X_ORIG + path, RECT_Y_MIN);     
        //console.log('3) ' + (RECT_X_ORIG + path) + ', ' + RECT_Y_MIN);
        // 4
        context.lineTo(RECT_X_ORIG + path - RECT_INCREMENT, RECT_Y_MIN);                                
        //console.log('4) ' + (RECT_X_ORIG + path - RECT_INCREMENT) + ', ' + RECT_Y_MIN);
        // 5
        context.lineTo(RECT_X_ORIG + path - RECT_INCREMENT, RECT_Y_MAX);                                
        //console.log('5) ' + (RECT_X_ORIG + path - RECT_INCREMENT) + ', ' + RECT_Y_MAX);

        context.closePath();
        context.fillStyle=gra;
        context.fill();
    }
    window.requestAnimationFrame(draw);
}


window.onload = function() {
    window.requestAnimationFrame(draw);
}

</script>
</html>

Answer 1

渐变的创建成本有些高。不要在每个动画循环上重新创建渐变，只需在应用程序的开头创建完整的渐变矩形，然后在循环中逐步显示它。

以下是示例代码和演示

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var rect=createRectCanvas();
var width=1;

requestAnimationFrame(draw);

function draw(){
    ctx.clearRect(0,0,cw,ch);
    ctx.drawImage(rect,0,0,width,rect.height,0,0,width,rect.height);
    width+=10;
    if(width<cw && width<rect.width){
        requestAnimationFrame(draw);
    }
}

function createRectCanvas(){
    var c=document.createElement('canvas');
    var context=c.getContext('2d');
    c.width=800;
    c.height=100;
    var gra = context.createLinearGradient(0, 0, 800, 0);
    gra.addColorStop(0, 'rgba(229, 88, 95, .6)');
    gra.addColorStop(1, 'rgba(255, 255, 255, 0)');
    context.fillStyle=gra;
    context.fillRect(0,0,800,100);
    return(c);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=900 height=500></canvas>

画布动画似乎没有以60 fps运行

1 个答案: