如何向负x轴水平平移帆布
如何向负x轴水平平移帆布
提问于 2013-11-24 06:02:39
我正在尝试用画布实现正弦波演示。我能用动画画正弦波。但是我的问题是我想把画布向左移动，因为正弦波动画超越了画布的视野。这是我的密码。
<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();回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-24 17:36:59
演示：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);
}
}
}当然，如果您在画布上绘制了其他资产，则还必须重新绘制它们(不管是否根据您的设计需要重新绘制)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20171649
复制相关文章
相似问题
腾讯云开发者
