Question

我一直在搞乱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); }
    }
}

它的作用是每按一次箭头键移动矩形[箭头键显示为＆amp;，（，％和'，不确定这对每个人来说是否相同，但它只是一个实验）。无论如何，我可以移动矩形，但它会留下一些残留物，因为它不会删除它以前的形式，所以我得到的是一个非常基本的蚀刻n-sketch使用非常厚的画笔。

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

最重要的是，我想知道如何通过同时向左和向上按压来水平移动。我知道我的代码可能不是很通用，但任何帮助我们非常感谢。

谢谢：）

Answer 1

我为你做了一个例子。你的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; }
}

Answer 2

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

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

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

HTML5中的画布：删除上一个矩形

2 个答案: