Холст в HTML5: удаление предыдущего прямоугольника - PullRequest
Новая
       4

Холст в HTML5: удаление предыдущего прямоугольника

3 голосов
/ 05 августа 2010

Я возился с элементом 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('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 с очень толстой кистью.

Что я хочу сделать, так это иметь возможность удалить предыдущую формупрямоугольник, чтобы оставалась только новая переведенная версия.

Кроме того, я хотел бы знать, как заставить его двигаться, скажем, по горизонтали, нажимая, возможно, влево и вверх одновременно.не очень универсален, но любая помощь нам очень ценится.

Спасибо:)

Ответы [ 2 ]

6 голосов
/ 06 августа 2010

Я сделал пример для вас.Ваш 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; }
}
0 голосов
/ 05 августа 2010

Чтобы ответить на первый вопрос, здесь есть функция очистки холста.A является ссылкой на элемент canvas, хотя вы можете редактировать, какие параметры он принимает.Вам нужно будет вызывать это каждый раз перед тем, как нарисовать новый прямоугольник. 

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

Я думаю, что во втором вопросе вы имели в виду двигаться под углом.Насколько я знаю, это будет немного сложно, потому что вам нужно будет записать нажатие клавиши, а затем установить тайм-аут, чтобы увидеть, была ли нажата другая клавиша в течение некоторого времени.Затем создайте функцию для перемещения обоих этих направлений или только одну, если никакие другие клавиши со стрелками не были нажаты.Прямо сейчас ваша функция будет работать, если обе клавиши будут нажаты, но прямоугольник будет дергаться влево и затем вверх.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...