привязка графической переменной холста (прямоугольник) к пользовательскому вводу.такое движение

Question

Попытка выполнить простое манипулирование графическим элементом в канве.

это JS

function init()
{
    var canvas=document.getElementById("canvas");
    if(canvas.getContext)
    {
        var ctx = canvas.getContext("2d");
        var box = ctx.fillStyle="#F90";
        ctx.fillRect (75, 10, 50, 50);
        ctx.shadowBlur=5;
        ctx.shadowColor="#f30";
        ctx.shadowOffsetX=3;
        ctx.shadowOffsetY=3;
    }
}

и, конечно, на стороне HTML у меня есть

<canvas id="canvas" width="600" height="250"></canvas>

Если я правильно понимаю ... Возможно, я не смогу сдвинуть коробку ... но мне придется "очищать" ее от каждого предыдущего хода. Тем не менее, как мне связать var box с событием мыши или стрелками (назад и вперед) ... и просто блуждать, почему нет тени, при переходе по коду это должно быть там.

спасибо D

Answer 1

Параметры тени применяются к командам рисования после их. Если вы переместите вызов fillRect после установки параметров тени, эффект должен быть видимым.

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

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