Nano Hash - криптовалюты, майнинг, программирование

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

Я возился с элементом 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); }
    }
}

Что он делает, так это перемещает прямоугольник всякий раз, когда вы нажимаете клавиши со стрелками [клавиши со стрелками отображались как &, (, % и ', не уверен, что это то же самое для всех, но это просто эксперимент]. В любом случае, я могу перемещать прямоугольник вокруг, но он оставляет своего рода осадок, так как он не удаляет свою предыдущую форму, так что я получаю очень простой этч-н-набросок, используя очень толстую кисть.

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

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

Спасибо :)

javascript canvas html
05.08.2010

Ответы:


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; }
}
06.08.2010
  • Ха, в конце концов я заставил его работать, но сравнивая ваш код с моим, мой кажется ужасно сложным. Спасибо :) 09.08.2010
  • Как сделать так, чтобы не преодолевать другие препятствия? Только сам прямоугольник я хочу очистить 02.11.2020

    • 2

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

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

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

    05.08.2010
  • хм, похоже не работает. Я вызываю эту функцию всякий раз, когда пользователь нажимает клавишу, например, перед тем, как я перевожу прямоугольник. Это правильно? 05.08.2010
  • Я немного смущен тем, как должен работать ваш код. Но проблема здесь в том, что когда вы вызываете clear, вам нужно нарисовать clearRect из верхнего левого угла. Поскольку вы переводите исходную точку, она не рисуется оттуда. Вам понадобится какой-то метод рисования clearRect в исходном 0,0. Один из методов, который приходит на ум, заключается в том, чтобы вместо перевода источника сохранить переменные x и y в начальную позицию. Затем, когда пользователь нажимает клавишу со стрелкой, манипулируйте значениями, как вы делали при переводе источника. Затем нарисуйте прямоугольник в нужное положение, используя x и y. 05.08.2010
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..