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

【问题标题】：Canvas animation does not appear to be running at 60 fps画布动画似乎没有以 60 fps 运行
【发布时间】：2016-04-30 07:32:33
【问题描述】：

我正在尝试模仿这个网站的流畅程度：http://material.cmiscm.com/（你可能以前见过）

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

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

小提琴： https://jsfiddle.net/16he6jfu/

原始代码（ctrl +v'able）：

<!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>

【问题讨论】：

在我的机器上看起来不错。
我的也是。也许你的机器被征税或废话。
疯了！我的机器很垃圾，但不会落后于我链接的网站，但会落后于我的网站。这对我来说可能很难解决。谢谢大家！
提示：stackoverflow.com/questions/21877240/…
@HC_ 听起来对我来说是正确的 - 将位图复制到位图而不是光栅化通常更快，您也可以从中做一部分。

标签： javascript html css canvas css-animations

【解决方案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; }

&lt;canvas id="canvas" width=900 height=500&gt;&lt;/canvas&gt;

【讨论】：

非常感谢您提供如此详尽的回答！我本来真的很想问我是否在做一些特别低效的事情，但是..不确定这是否是一个愚蠢的问题。如果您不介意我由您运行它，我正在尝试另一种解决方案。我要创建渐变，并在其顶部创建一个覆盖矩形（与背景颜色匹配），然后将渐变矩形的所述矩形“关闭”。主要问题是，我目前最终翻译了整个画布。这个解决方案值得在单个画布上追求/可能吗？
@HC_。这听起来不错——有点像打开一个滑动顶盒的顶部。您必须重新绘制渐变“背景”，然后增加显示矩形的x 值。但是，恕我直言，使用drawImage 的剪辑版本（如我的示例）似乎更容易，因为移动部件更少。祝你的项目好运！