Question

我试图让我的头围绕着。我想在画布的右端绘制一个条形图，然后在下一个框架上，将条形图向左移动一个“位置”，并在右端绘制第二个条形图。然后在第三帧，将两个条移动到左边一个位置并绘制第三个条等等......

[| | | | 1]，[| | | 1 | 2]，[| | 1 | 2 | 3]

它有它工作但是像这样我必须为每个条形码写上下文...（

    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();

这不是最佳方式..？

Answer 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++;

enter image description here

示例代码和演示：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>

Answer 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

Snapshot

<canvas>绘制多个Rect并将它们从一侧移动到另一侧</canvas>

2 个答案:

Live demo here