HTML5 中的画布：删除前一个矩形答案

【问题标题】：Canvas in HTML5: Removing Previous RectangleHTML5 中的画布：删除前一个矩形
【发布时间】：2011-03-25 21:48:20
【问题描述】：

我一直在搞乱html5中的canvas元素，这是我经过一番试验后得到的

function canvasMove(e) {

    var canvas = document.getElementById('game');

    if(canvas.getContext) {
        var draw = canvas.getContext('2d');

        draw.fillStyle = 'rgba(0,0,0,0.5)';
        draw.fillRect('10', '10', '100', '100');    

        var code;

        if (!e) var e = window.event;
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        var character = String.fromCharCode(code);

        if(character == '&') { draw.translate(0, -10); }
        if(character == '(') { draw.translate(0, 10); }
        if(character == '%') { draw.translate(-10, 0); }
        if(character == "'") { draw.translate(10, 0); }
    }
}

它的作用是在您按下箭头键时移动矩形[箭头键显示为 &、(、% 和 '，不确定这是否对每个人都一样，但这只是一个实验]。无论如何，我可以移动矩形，但会留下一种残留物，因为它不会删除它以前的形式，所以我得到的是一个非常基本的 etch-n'-sketch 使用非常厚的画笔。

我想要做的是能够删除矩形的先前形式，以便只留下新的翻译版本。

最重要的是，我想知道如何让它水平移动，比如同时按下左右键。我知道我的代码可能不是很通用，但我们非常感谢任何帮助。

谢谢:)

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

这里要回答第一个问题是清除画布的功能。 A 是对 canvas 元素的引用，尽管您可以编辑它采用的参数。每次绘制新矩形之前都需要调用它。

function clear(a){
    a.getContext('2d').clearRect(0,0,a.width,a.height);
}

我认为在第二个问题中，您的意思是倾斜移动。据我所知，这会有点困难，因为您会记录按键，然后设置超时以查看是否在一段时间内按下了另一个按键。然后创建一个函数来移动这两个方向，或者如果没有按下其他箭头键则只移动一个。现在，如果两个键都被按下，你的函数会起作用，但是矩形会向左然后向上。

【讨论】：

嗯，它似乎没有工作。每当用户按下一个键时，我都会调用这个函数，就像在我翻译矩形之前一样。对吗？
我对您的代码应该如何工作感到有些困惑。但是这里的问题是，当您调用 clear 时，您需要从左上角绘制 clearRect 。因为您正在翻译原点，所以它不是从那里绘制的。您将需要一些在原始 0,0 处绘制 clearRect 的方法。想到的一种方法是将原点保存 var x 和 y 转换为起始位置。然后，当用户按下箭头键时，就像您在翻译原点时所做的那样操作值。然后使用 x 和 y 将矩形绘制到该位置。

【解决方案2】：

我为你做了一个例子。您的 HTML 必须调用我的 init() 函数。我用过：

<body onLoad="init()">

如果您有任何问题，请告诉我

var canvas;
var draw;

var WIDTH;
var HEIGHT;

var x = 10;
var y = 10;

// in my html I have <body onLoad="init()">
function init() {
    canvas = document.getElementById('game');
    HEIGHT = canvas.height;
    WIDTH = canvas.width;
    draw = canvas.getContext('2d');

    // every 30 milliseconds we redraw EVERYTHING.
    setInterval(redraw, 30);

    // canvas.keydown = canvasMove;

    document.onkeydown = canvasMove; 
}

//wipes the canvas context
function clear(c) {
    c.clearRect(0, 0, WIDTH, HEIGHT);
}

//clears the canvas and draws the rectangle at the appropriate location
function redraw() {
    clear(draw);
    draw.fillStyle = 'rgba(0,0,0,0.5)';
    draw.fillRect(x, y, '100', '100');   
}

function canvasMove(e) {
  if(e.keyCode == '38') { y -= 1; }
  if(e.keyCode == '40') { y += 1; }
  if(e.keyCode == '37') { x -= 1; }
  if(e.keyCode == "39") { x += 1; }
}

【讨论】：

哈，我终于让它工作了，但是比较你的代码和我的代码，我的代码变得非常复杂。谢谢你:)
如何避免清除其他障碍？我只想清除矩形本身