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帆布問題

回答

相關問題