javascript HTML5 中的画布：删除上一个矩形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3416724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Canvas in HTML5: Removing Previous Rectangle
提问by Johnny
I've been messing around with the canvas element in html5, and this is what I've got after a bit of experimenting
我一直在处理 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); }
}
}
What it does is moves the rectangle whenever you press the arrow keys [Arrow keys were showing up as &, (, % and ', not sure if this is the same for everyone but it's just an experiment]. Anyway, I can move the rectangle about but it leaves a sort of residue, as in it doesn't delete it's previous form, so what I get is a very basic etch-n'-sketch using a very thick brush.
它的作用是在您按下箭头键时移动矩形 [箭头键显示为 &, (, % 和 ', 不确定这是否对每个人都一样，但这只是一个实验]。无论如何，我可以移动矩形，但它留下了一种残留物，因为它不会删除它以前的形式，所以我得到的是一个非常基本的 etch-n'-sketch 使用非常厚的刷子。
What I want to do is be able to delete the previous form of the rectangle so that only the new translated version is left.
我想要做的是能够删除矩形的先前形式，以便只留下新的翻译版本。
On top of that I'd like to know how to make it move say, horizontally, by pressing maybe left and up simultaneously. I am aware my code probably isn't very versatile, but any help us much appreciated.
最重要的是，我想知道如何让它水平移动，比如同时按下左和上。我知道我的代码可能不是很通用，但非常感谢任何帮助我们。
Thanks :)
谢谢 ：）
回答by Simon Sarris
I made an example for you. Your HTML has to call my init() function. I used:
我给你做了一个例子。您的 HTML 必须调用我的 init() 函数。我用了：
<body onLoad="init()">
Let me know if you have any problems with it
如果您有任何问题，请告诉我
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; }
}
回答by qw3n
To answer the first question here is a function to clear a canvas. A is a reference to canvas element though you could edit what parameters it takes. You would need to call this every time before you draw a new rectangle.
在这里回答第一个问题是清除画布的功能。A 是对画布元素的引用，尽管您可以编辑它需要的参数。每次绘制新矩形之前，您都需要调用它。
function clear(a){
a.getContext('2d').clearRect(0,0,a.width,a.height);
}
I think in the second question you meant move at an angle. As far as I know that would be a little difficult because you would have record the key press and then set a timeout to see if another one was pressed within some amount of time. Then create a function to move both of those directions or just one if no other arrow keys were pressed. Right now your function would kind of work if both key were pressed, but the rectangle would jerk left and then up.
我认为在第二个问题中你的意思是移动一个角度。据我所知，这会有点困难，因为您会记录按键操作，然后设置超时以查看是否在一段时间内按下了另一个按键。然后创建一个函数来移动这两个方向，或者如果没有按下其他箭头键，则只移动一个方向。现在，如果按下两个键，您的功能就会起作用，但是矩形会向左然后向上猛拉。
