移動矩形畫布內

我的代碼：移動矩形畫布內

$(document).ready(function() { 

    var canvas, 
    ctx, 
    playerimage, 
    x, 
    y, 
    speed = 5, //speed for the player to move at 
    width = 10, //width of the player 
    height = 10; //height of the player 

    function init() { 
     canvas = $("#Mycanvas"); 
     ctx = canvas[0].getContext('2d'); 
     x = canvas.width()/2; 
     y = canvas.height()/2; 

     playerimage = new Image(); 
     playerimage.src = "ninja.png"; //path to the image to use for the player 
     window.addEventListener("keydown", update, false); 
     //canvas.addEventListener("keypress", update); 
     render(); 
    } 

    $(window).load(function() { init(); }); 

    function update(event) { 
     if (event.keyCode == 38) { 
      y -= speed; //going up 
     } 
     if (event.keyCode == 40) { 
      y += speed; //going down 
     } 
     if (event.keyCode == 37) { 
      x -= speed; //going left 
     } 
     if (event.keyCode == 39) { 
      x += speed; //going right 
     } 
     render(); 
    } 

    function render() { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.fillRect(x, y, width, height); 


    } 
});

我的jsfiddle：http://jsfiddle.net/BLpGH/14/

，你可以看到矩形被代替移動好像繪製移動我不的線代替我不想畫出一條線，我該怎麼做？

來源

2013-07-26 Sora

工作版下，和demo here。

我將clearRect移動到了更新函數，所以它會在值更改之前運行。我也添加了if條件，所以img不會走出canvas。

function update(event) { 
     if (x + 20 > canvas.width() && event.keyCode == 39) { 
      ctx.clearRect(x, y, width, height); 
      x = canvas.width() - 15; 
      render(); 
      return false; 
     } 
     if (x - 10 < 0 && event.keyCode == 37) { 
      ctx.clearRect(x, y, width, height); 
      x = 5; 
      render(); 
      return false; 
     } 

     if (y - 10 < 0 && event.keyCode == 38) { 
      ctx.clearRect(x, y, width, height); 
      y = 5; 
      render(); 
      return false; 
     } 
     if (y + 20 > canvas.height() && event.keyCode == 40) { 
      ctx.clearRect(x, y, width, height); 
      y = canvas.height() - 15; 
      render(); 
      return false; 
     } 

     ctx.clearRect(x, y, width, height); 
     if (event.keyCode == 38) { 
      y -= speed; //going up 
     } 
     if (event.keyCode == 40) { 
      y += speed; //going down 
     } 
     if (event.keyCode == 37) { 
      x -= speed; //going left 
     } 
     if (event.keyCode == 39) { 
      x += speed; //going right 
     } 
     render(); 
    } 

    function render() { 
     ctx.fillRect(x, y, width, height); 
    }

我使用x + 20，因爲您定義的平方是（width = 10，//玩家的寬度）。所以如果你靠近畫布端，我想保證它是畫布寬度的球員，但是因爲x定義了方塊/球員圖像的左側像素，所以我增加了2×10。在相反的方向上這不是必要的，所以只需1倍寬度就足夠了。與y相同。

來源

2013-07-26 13:39:23 Sergio

非常感謝你 – Sora

@索拉，不客氣！ – Sergio

有無論如何修改我的代碼，所以當矩形命中可以用畫布邊框動畫？ – Sora

canvas.width和canvas.height是函數。並將其作爲增值經銷商，或致電canvas.width()和canvas.height()

來源

2013-07-26 13:39:40 mguimard

改變這一行：

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

...這樣的：

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

演示：http://jsfiddle.net/BLpGH/15/

也就是說，撥打.width和.height作爲功能。儘管將這些值存儲在變量中會更有效，而不是每次重繪時都要調用兩個方法。

來源

2013-07-26 13:39:52 nnnnnn

我可以修改我的代碼，讓矩形移動畫布嗎？ – Sora

你的意思是沒有重新粉刷或清除畫布？ – nnnnnn

您沒有正確清除畫布。 canvas變量是一個jQuery對象，width和height是函數調用，而不是屬性。更改此行

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

來源

2013-07-26 13:40:26 Ceres

移動矩形畫布內

回答

相關問題