Javascript Canvas issue

Я здесь новый, так простите мое невежество. Надеюсь, что у всех будет отличная пятница. Я работаю над веб-сайтом, на котором будет холст, и на этом полотне будет бар, моя цель - просто заставить панель расширяться, когда я нажимаю «D» и убираюсь влево, когда нажимаю «A». Я использую функцию fillRect, и расширяющаяся правая часть работает отлично, пока втягивающая часть вообще не работает, поскольку я пытаюсь использовать функцию clearRect. Функция clearRect очищает всю исходную ширину моего прямоугольника без и голубого цвета моего холста вместе с ним, оставляя полосу серой горечи. Вот мой код, и если кто-нибудь из вас знает, как мне удастся очистить последние 10 пикселей моей серой полосы, оставив красивую синюю основу холста нетронутой, когда я нажимаю «А», я буду бесконечно благодарен.Javascript Canvas issue

$(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

Вы должны перерисовки фона с каждым изменением в вашей линии (это холст путь)

Дон» t беспокоиться, холст очень быстрый при перерисовке!

Вот код и Fiddle: 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 Canvas issue

ответ

Смежные вопросы