在keydown(JS，Jquery）上更改HTML5 Canvas元素

Altering HTML5 Canvas element on keydown (JS, Jquery)

本文关键字：HTML5 Canvas 元素 keydown JS Jquery      更新时间：2023-09-26

按下左键时，我正试图在画布上移动一些东西。

$(document).ready(function () {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img,0,0); // draw the image at the right coords
    ctx.drawImage(img,110,110); // draw the image at the right coords
    ctx.save();
};
img.src = 'tiles/processed/1_grass.png'; // Set source path
function draw() {
    ctx.translate(20,0);
};
draw();
draw();
draw();
$(document).keydown(function(e) {
    if (e.keyCode == 37) {
        draw();
    };
});
});

现在，它出现了三个draw（）；'s工作，但函数内部的那个不工作。

我是完全错过了画布的概念（因为它本质上是静态的，必须一直重新绘制），还是我做错了什么？

（附言：我也在使用Jquery）

干杯！

您实际上从未重新绘制画布。绘制一次（img.onload），否则仅平移画布。

draw函数应该清除画布并重新绘制图像。

这里有一个简单的例子，基于您的代码：

$(function () {
  var ctx = document.getElementById('canvas').getContext('2d');
  function draw() {
    ctx.save();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.restore();
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, 20, 20);
  };
  draw();
  $(document).keydown(function(evt) {
    switch(evt.keyCode) {
      case 37:
        ctx.translate(-5, 0);
        break;
      case 38:
        ctx.translate(0, -5);
        break;
      case 39:
        ctx.translate(5, 0);
        break;
      case 40:
        ctx.translate(0, 5);
        break;
    }
    draw();
  });
});​

演示：http://jsfiddle.net/Vx2kQ/

不过，就我个人而言，我不会使用translate来处理这个动作。我会使用一些x/y坐标，存储在一个私有变量中。按下键后，我会操纵这些坐标并重新绘制。

相关文章：