<canvas> 绘制多个矩形并将它们全部从一侧移动到另一侧答案

【问题标题】：<canvas> Drawing multiple Rects and moving them all from one side to another<canvas> 绘制多个矩形并将它们全部从一侧移动到另一侧
【发布时间】：2014-03-06 07:18:02
【问题描述】：

我正在努力解决 . 我想在画布的右端绘制一个条，然后在下一帧上，将条向左移动一个“位置”，并在右端绘制第二个条。然后在第三帧上，将两个条向左移动一个位置并绘制第三个条，依此类推...

[ | | | |1], [ | | |1|2],[ | |1|2|3]

它可以工作，但是像这样我必须为每个条写 context.strokeRect() 行...

    context.strokeStyle = "black";
    context.strokeRect(490, 100, 8, width[i]);
    context.strokeRect(480, 100, 8, width[i-1]);
    context.strokeRect(470, 100, 8, width[i-2]);
    context.stroke();

这不是最好的方法..？

【问题讨论】：

标签： canvas translate

【解决方案1】：

[更改：让条从右侧开始并将现有条向左推]

这是向左绘制条形的代码：

for(var i=widthIndex, x=maxX; i>=0 && x>0; i--, x-=8){
    ctx.strokeRect(x,100,8,width[i]);
    if(parseInt(i/10)==i/10){
        ctx.fillRect(x,100,8,width[i]);
    }
}
widthIndex++;

示例代码和演示：http://jsfiddle.net/m1erickson/SHY92/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var maxX=270;
    var maxBars=parseInt(maxX/8);
    var width=[];
    var widthIndex=0;
    var countdown=5;
    ctx.fillStyle="red";

    // create some test data
    for(var i=0;i<250;i++){
        width.push(20+Math.random()*10);
    }

    animate();

    function animate(){
        if(widthIndex>width.length-1){return;}

        requestAnimationFrame(animate);

        if(countdown-->0){ return; }

        ctx.clearRect(0,0,canvas.width,canvas.height);

        for(var i=widthIndex, x=maxX; i>=0 && x>0; i--, x-=8){
            ctx.strokeRect(x,100,8,width[i]);
            if(parseInt(i/10)==i/10){
                ctx.fillRect(x,100,8,width[i]);
            }
        }

        widthIndex++;

        countdown=5;

    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：

嘿，感谢您的快速回复。但不能解决我的问题。在您的示例中，每个新栏都在最后一个栏之后绘制。但我试图在同一个位置绘制所有条形图，但将所有其他条形图保留并移动到它后面。 [jsfiddle.net/m1erickson/8g9AH/][1][1]：jsfiddle.net/m1erickson/8g9AH
我已经更新了我的答案，在右侧绘制新的条形图并将现有的条形图向左“推”。祝你的项目好运！

【解决方案2】：

这是一个简单的解决方案：

只需在右侧用纯色背景绘制条形
将画布“blit”到左侧并在下一个小节上重复

一些设置值：

var ctx = canvas.getContext('2d'),
    barWidth = 20,                   // width of bar and blit delta
    w = canvas.width,
    h = canvas.height,
    maxHeight = h * 0.5;             // for our random bar (demo)

在右侧绘制条：

function drawBar() {
    // get a random height
    var bh = maxHeight * Math.random() + maxHeight;

    // we're gonna need a solid background
    ctx.fillStyle = '#fff';
    ctx.fillRect(w - barWidth - 1, 0, barWidth - 1, h);  // bar area at right

    // draw a random bar
    ctx.fillStyle = '#902';
    ctx.fillRect(w - barWidth - 1, 0, barWidth - 1, bh);
}

上面的内容当然会替换为您的实际条形方法 - 您只需要在相同位置绘制一个新条形，只需更改高度等。纯色背景很重要，因为我们在自己之上绘制（背景是'不会自动清除）。

要“blit”，您只需将画布绘制到自身，但目标 x 会减少 barWidth：

ctx.drawImage(canvas, barWidth, 0, w - barWidth, h,  // source
                      0, 0, w - barWidth, h);        // destination

然后让它们一起工作：

(function loop() {
    blit();
    drawBar();
    setTimeout(loop, 100);
})();

Live demo here

【讨论】：