Question

我正在尝试用canvas实现正弦波演示。我能用动画绘制正弦波。但我的问题是我想将画布向左移动，因为正弦波动画超出了画布的视口。这是我的代码。

<canvas id='a' width="320" height="480"></canvas>

Javascript：

var rot=0;
var c= document.getElementById('a');

function a(){
setInterval(function(){
   ctx=c.getContext('2d');
   ctx.fillStyle="red";
   rad=rot*Math.PI/180;
   var x=100+100*Math.cos(rad);
   var y=100+100*Math.sin(rad);
   ctx.fillRect(rot,y,1,1);
   rot++;
 },10);
}
a();

Answer 1

演示：http://jsfiddle.net/m1erickson/K6SL3/

这是一种基于X坐标绘制正弦波的有效方法：

ctx.fillRect(x,Math.sin(x/10)*30+50,1,1);

直到波到达画布的末尾，才正常绘制波浪

当波到达画布的末尾时，您可以重绘整个波形，但向左移动1个像素。

// start panning when x reaches panAtX

var n1=x-panAtX;

// set up a temporary xx that draws the wave from -1 to the panAtX position

var xx=-1;

// clear the canvas

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

// redraw the wave, but shifted 1 pixel to the left

for(n=n1;n<x;n++){
    ctx.fillRect(xx++,Math.sin(n/10)*30+50,1,1);
}

所以把它们放在一起，你的动画可能是这样的：

var x=0;
var panAtX=250;
var continueAnimation=true;
animate();


function animate(){

    if(continueAnimation){
        requestAnimationFrame(animate);
    }

    if(x++<panAtX){
        ctx.fillRect(x,Math.sin(x/10)*30+50,1,1);
    }else{
        var n1=x-panAtX;
        var xx=-1;

        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(n=n1;n<x;n++){
            ctx.fillRect(xx++,Math.sin(n/10)*30+50,1,1);
        }
    }
}

当然，如果您在画布上绘制了其他资源，则必须重新绘制它们（根据您的设计需要重新绘制或不平移）。

如何将画布水平平移到负x轴

1 个答案: