Javascript HTML5中的画布：删除上一个矩形
我在html5中一直在玩弄画布元素，这是我经过一点实验后得到的Javascript HTML5中的画布：删除上一个矩形,javascript,html,canvas,Javascript,Html,Canvas,我在html5中一直在玩弄画布元素，这是我经过一点实验后得到的 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('1
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); }
}
}
谢谢：）要回答第一个问题，这里有一个清除画布的函数。A是对canvas元素的引用，尽管您可以编辑它需要的参数。在绘制新矩形之前，每次都需要调用此函数
function clear(a){
a.getContext('2d').clearRect(0,0,a.width,a.height);
}
我想在第二个问题中，你的意思是以一个角度移动。据我所知，这将是一个有点困难，因为你会记录下按键，然后设置一个超时，看看是否有另一个在一定时间内按下。然后创建一个函数来移动这两个方向，如果没有按下其他箭头键，则只移动一个方向。现在，如果同时按下两个键，您的函数可能会正常工作，但矩形会向左然后向上移动。我给您举了一个例子。您的HTML必须调用my 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; }
}
var画布；
var提取；
var宽度；
变异高度；
var x=10；
变量y=10；
//在我的html中，我有
函数init（）{
canvas=document.getElementById（'game'）；
高度=画布高度；
宽度=画布宽度；
draw=canvas.getContext（'2d'）；
//每30毫秒我们就会重新绘制所有内容。
设置间隔（重新绘制，30）；
//canvas.keydown=画布移动；
document.onkeydown=canvasMove；
}
//擦除画布上下文
功能清除（c）{
c、 clearRect（0，0，宽度，高度）；
}
//清除画布并在适当位置绘制矩形
函数重画（）{
清除（绘制）；
draw.fillStyle='rgba（0,0,0,0.5）'；
draw.fillRect（x，y，'100'，'100'）；
}
功能画布移动（e）{
如果（e.keyCode='38'）{y-=1；}
如果（e.keyCode='40'）{y+=1；}
如果（e.keyCode=='37'{x-=1；}
如果（e.keyCode==“39”）{x+=1；}
}