Javascript 画布动画似乎没有以60 fps的速度运行_Javascript_Html_Css_Canvas_Css Animations

Javascript 画布动画似乎没有以60 fps的速度运行

javascript html css canvas

Javascript 画布动画似乎没有以60 fps的速度运行,javascript,html,css,canvas,css-animations,Javascript,Html,Css,Canvas,Css Animations,我试图模仿这个网站的流畅程度：你可能以前见过它所以，我从非常非常小的地方开始，只是尝试模拟紫色部分的渐变从框中淡出的方式。他的梯度是对角的，为了简单起见，我的是水平的但是，我的问题是，即使我尝试改变RECT_增量的值，梯度也会非常不稳定地出现小提琴：原始代码ctrl+v'able：创建渐变有些昂贵。不要在每个动画循环中重新创建渐变，只需在应用程序的开始处创建完整的渐变矩形，并在循环中递增显示下面是示例代码和演示 var canvas=document.getElementByIdc

我试图模仿这个网站的流畅程度：你可能以前见过它

所以，我从非常非常小的地方开始，只是尝试模拟紫色部分的渐变从框中淡出的方式。他的梯度是对角的，为了简单起见，我的是水平的

但是，我的问题是，即使我尝试改变RECT_增量的值，梯度也会非常不稳定地出现

小提琴：

原始代码ctrl+v'able：

创建渐变有些昂贵。不要在每个动画循环中重新创建渐变，只需在应用程序的开始处创建完整的渐变矩形，并在循环中递增显示

下面是示例代码和演示

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var cw=画布宽度； var ch=画布高度； var rect=createRectCanvas； var宽度=1；请求动画框架绘制；函数图{ ctx.clearRect0,0，cw，ch； ctx.drawImagerect，0,0，宽度，垂直高度，0,0，宽度，垂直高度；宽度+=10；

ifwidth渐变的创建成本有点高。与其在每个动画循环中重新创建渐变，不如在应用程序开始时创建完整的渐变矩形，并在循环中递增显示

下面是示例代码和演示

我的机器看起来很好。我的也一样。也许你的机器被征税了或是垃圾。疯狂！我的机器是垃圾，但在我链接的网站上没有延迟，但在我的网站上有延迟。这对我来说可能很难排除故障。谢谢各位！提示：@HC_u对我来说听起来不错-通常将位图复制到位图而不是光栅化更快，而且你可以做一个po我的机器也一样。在我的机器上看起来很好。我的机器也一样。也许你的机器被征税了或是垃圾。疯了！我的机器是垃圾，但在我链接的网站上并没有延迟，但在我的网站上有延迟。这可能对我来说很难排除故障。谢谢大家！提示：@HC_u对我来说听起来不错-通常将位图复制到位图而不是光栅化更快，一个d你也可以从中得到一部分。非常感谢你这么彻底的回答！我最初真的想问我是否做了一些特别低效的事情，但..不确定这是不是一个愚蠢的问题。如果你不介意我由你来运行它，我有一个备选解决方案。我要创建梯度，并创建一个co在与背景颜色相匹配的画布上平移矩形，然后将所述矩形从渐变矩形中平移出来。主要问题是，我目前最终平移了整个画布。这个解决方案是否值得在单个画布上探索/可能？@HC\ux。听起来不错-有点像打开滑动顶框的顶部。你必须重新绘制gra先删除背景，然后增加显示矩形的x值。但是，我的示例中使用drawImage的剪切版本似乎更容易，因为移动的部分更少。祝你的项目好运！非常感谢你如此彻底的回答！我最初真的想问我是否做了一些特别低效的事情，但是。。我不确定这是否是一个愚蠢的问题。如果你不介意的话，我有一个替代的解决方案，我正在尝试。我要创建渐变，在它上面创建一个与背景颜色匹配的覆盖矩形，然后将所说的矩形从渐变矩形中翻译出来。主要的问题是，我现在要翻译的是en轮胎画布。这个解决方案值得在单个画布上追求/可能吗？@HC\ux。听起来不错-有点像打开滑动顶框的顶部。你必须重新绘制渐变背景，然后增加显示矩形的x值。但是，IMHO，使用我示例中的drawImage剪裁版本似乎更容易，因为有活动部件少。祝你的项目好运！

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