Javascript帆布问题

我是新来的，所以原谅我的无知。希望每个人都有一个伟大的星期五晚上。我正在一个网站上打印一张画布，在画布上会有一个栏杆，我的目标是在按'D'时简单地将栏杆向右延伸，并在按下'A'时向左退回。我正在使用函数fillRect，并且扩展右部分工作良好，而缩回部分根本不工作，因为我试图使用clearRect函数。 clearRect函数正在清除矩形的整个原始宽度，没有和画布的浅蓝色一起清除，留下一条灰色的苦味。这里是我的代码，如果您有任何想法，我可以设法清除灰色条的最后10个像素，同时在按下'A'时保留美丽的蓝色底层画布，我将永远感激。Javascript帆布问题

$(document).ready(function(){ 
    var width=10; 
$(document).keydown(function(key){ 
    if(key.which === 68)  
     adjustWidth(1); 
    else if(key.which === 65) 
     adjustWidth(2); 

}); 
var canvas=$("#canvas")[0]; 
var ctx = canvas.getContext("2d"); 
var w = $("#canvas").width(); 
var h = $("canvas").height(); 

ctx.fillStyle = "#C1DAD6"; 
ctx.fillRect(0,0,w,h); 
ctx.strokeStyle="black"; 
ctx.strokeRect(0,0,w,h); 

function adjustWidth(iw) 
{ ctx.fillStyle = "grey"; 
if(iw===1){ 
    ctx.fillRect(0,100,width+10,5) 
    width+=10; 
    } 
else if(iw===2){ 
    ctx.clearRect(0,100,width,5) 
    width-=10; 
} 
}  


});

来源

2013-07-06 bala

可你只是'fillRect'蓝色，而不是将其清除？ – akonsu

我会建议你使用另一种方法：

var width = 10; 

function draw() { 
    ctx.clearRect(0,0,w,h); 
    ctx.drawRect(0,100,width,5); 
} 

setInterval(draw, 30); 

$(document).keydown(function(key){ 
    if(key.which === 68)  
     width += 10; 
    else if(key.which === 65) 
     width -= 10; 

});

也许它看起来笨重，但它不是，相信我。

来源

2013-07-06 03:58:41

有一个'requestAnimationFrame'方法比'setInterval'重要。 – akonsu

clearRect也清除背景。

而是先救背景：

$(document).ready(function(){ 
    var width=10; 

    $(document).keydown(function(key){ 
     if(key.which === 68)  
      adjustWidth(1); 
     else if(key.which === 65) 
      adjustWidth(2); 
    }); 

    var canvas=$("#canvas")[0]; 
    var ctx = canvas.getContext("2d"); 
    var w = $("#canvas").width(); 
    var h = $("canvas").height(); 

    ctx.fillStyle = "#C1DAD6"; 
    ctx.fillRect(0,0,w,h); 
    ctx.strokeStyle="black"; 
    ctx.strokeRect(0,0,w,h); 
    var saved=ctx.getImageData(0,0,w,h); 

    function adjustWidth(iw){ 
     ctx.putImageData(saved,0,0); 
     ctx.fillStyle = "grey"; 
     if(iw===1){ 
      width+=10; 
     }else if(iw===2){ 
      width-=10; 
     } 
     ctx.fillRect(0,100,width,5); 
    } 
});

这里有一个的jsfiddle链接：http://jsfiddle.net/bgg96/

来源

2013-07-06 04:06:00 simonzack

如果我可以：假设背景确实需要保存，也许是两个画布方法，其中前景画布在静态背景之上，这将是有益的。 – akonsu

但是在这里，op自己绘制背景，而不是有图像。 – simonzack

我的意思是你可以在一个单独的画布上生成并显示一次背景。无需每次都调用putImageData。 – akonsu

你必须重新绘制在你的行中的每个改变你的背景（这是画布方式）

别不用担心，画布在重绘时速度非常快！

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/WdEWz/

<!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 width=10; 

    $(document).keydown(function(key){ 
     if(key.which === 68)  
      adjustWidth(1); 
     else if(key.which === 65) 
      adjustWidth(2); 
    }); 

    var canvas=$("#canvas")[0]; 
    var ctx = canvas.getContext("2d"); 
    var w = $("#canvas").width(); 
    var h = $("canvas").height(); 

    ctx.fillStyle = "#C1DAD6"; 
    ctx.fillRect(0,0,w,h); 
    ctx.strokeStyle="black"; 
    ctx.strokeRect(0,0,w,h); 

    function adjustWidth(iw){ 

     ctx.clearRect(0,0,w,h); 
     ctx.fillStyle = "#C1DAD6"; 
     ctx.fillRect(0,0,w,h); 
     ctx.fillStyle = "grey"; 
     if(iw===1){ 
      width+=10; 
      ctx.fillRect(0,100,width+10,5) 
     }else if(iw===2){ 
      width-=10; 
      if(width>0){ 
        ctx.fillRect(0,100,width+10,5) 
      } 
     } 
    } 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

来源

2013-07-06 04:07:04 markE

惊人的解释和非常聪明的做法！我非常感谢这一点，我第一次使用这个网站非常愉快，非常感谢你！ – bala

欢迎来到Stackoverflow ...快回来！ – markE

...并将答案标记为已接受 – akonsu

Javascript帆布问题

回答

相关问题