HTML область холста - восстановление контекста? - PullRequest
Новая
       40

HTML область холста - восстановление контекста?

2 голосов
/ 19 октября 2011

Я пытаюсь установить «грязную зону» на холсте, чтобы предотвратить перекрашивание неподвижных объектов (фоновое изображение, статические элементы и т. Д.), Т. Е. Необходимо перерисовать только фон, окрашенный за движущимся игроком

РЕДАКТИРОВАТЬ: Как предложено, вот его jsfiddle http://jsfiddle.net/7kbzj/3/

Метод "update" там не работает, так что его moveSprite () можно запустить, нажав ссылку "Move Sprite"... По сути, зона клиппирования должна перемещаться на 10 пикселей вправо при каждом нажатии.Обтравочная маска остается в исходном положении, происходит только перекраска.Странно o_O

Поэтому, когда я инициализирую свой холст, после того, как фон закрашен, установите, я использую метод ctx.save (): 

function init() {
    canvas = document.getElementById('kCanvas');
    ctx = canvas.getContext('2d');  

    ctx.fillStyle = "rgb(0,128,0)";
    ctx.fillRect (0,0,320,240);

    ctx.save();

    setInterval(function () { update(); }, tpf);
}

Чтобы увидеть работы отсечения,нарисуйте другой цветной фон (синий) в области, которую я хотел обрезать ... результат плохой, только первая область обрезки закрашена синим: (

function update() {
    setDirtyArea(x,y,w+1,h)

    ctx.fillStyle = "rgb(0,0,128)";
    ctx.fillRect (0,0,320,240);

    x++;

    // paint image
    ctx.clearRect(x,y,w,h);
    ctx.drawImage(imageObj, x, y);

} 

function setDirtyArea(x,y,w,h) {
   ctx.restore();   
   // define new dirty zone
   ctx.beginPath();
   ctx.rect(x, y, w, h);
   ctx.clip();
}

Мне бы очень хотелось, чтобы голубая зона распространялась вправо от экрана ... помогите, пожалуйста, я не понимаю, в чем дело! Спасибо, Дж.

1 Ответ

4 голосов
/ 16 ноября 2011

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

http://jsfiddle.net/jaredwilli/7kbzj/7/

ctx.save(); // save the context
    // define new dirty zone
    ctx.beginPath();
        ctx.rect(x, y, w, h);
        ctx.clip();

ctx.restore(); // restore the context

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

Надеюсь, это поможет.

...