0

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

Код примерно такой:

...
ctx.fillStyle = '#f50';
ctx.fillRect( 20, 20, 100, 50 );
...
1
  • 1
    Без очистки холста никак, нужно перерисовывать все объекты
    – Gs D
    25 авг 2018 в 12:47

1 ответ 1

2

Возможно ли изменить позицию фигуры в канвасе, без того, чтоб все очищать

нет

не хотелось бы все очищать и заново перерисовывать

тут есть как минимум два варианта:

1) использовать два канваса

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

let html = (template, ...substitutions) => String.raw(template, ...substitutions);
window.addEventListener('load', () => {
    const W = 400;
    const H = 400;
    document.body.setAttribute('style', 'background-color: #eaffea;');
    document.body.insertAdjacentHTML('beforeend', html `
        <canvas id="back" width="${W}" height="${H}" style="position:fixed; top:40px; left:40px; border:solid 1px grey;"></canvas>
        <canvas id="front" width="${W}" height="${H}" style="position:fixed; top:40px; left:40px; border:solid 1px grey;"></canvas>
    `);
    let back = document.getElementById('back');
    let back_ctx = back.getContext('2d');
    let front = document.getElementById('front');
    let front_ctx = front.getContext('2d');
    drawCircle(back_ctx, [120, 20], [100, 100]);
    let xy = [0, 0];
    let wh = [100, 100];
    setInterval(() => {
        Promise
            .resolve(front_ctx)
            .then(clearCircle)
            .then(ctx => drawCircle(ctx, xy, wh))
            .then(move);
    }, 20);
    function clearCircle(ctx) {
        ctx.clearRect(0, 0, W, H);
        return ctx;
    }
    function drawCircle(ctx, [x, y], [w, h]) {
        ctx.fillStyle = 'rgba(125,125,125,0.5)';
        ctx.fillRect(x, y, w, h);
        return ctx;
    }
    let q = true;
    function move() {
        if (q) {
            xy[0]++;
            if (xy[0] >= (W - 100))
                q = !q;
        }
        else {
            xy[0]--;
            if (xy[0] <= 0)
                q = !q;
        }
    }
});

2) делать "скриншот" фонового изображения

если фоновое изображение рисуется редко - можно сделать картинку и подставлять картинку, вместо повторения вычислений и отрисовок

let html = (template, ...substitutions) => String.raw(template, ...substitutions);
window.addEventListener('load', () => {
    const W = 400;
    const H = 400;
    document.body.setAttribute('style', 'background-color: #eaffea;');
    document.body.insertAdjacentHTML('beforeend', html `
        <canvas id="back" width="${W}" height="${H}" style="position:fixed; top:40px; left:40px; border:solid 1px grey;"></canvas>
    `);
    let back = document.getElementById('back');
    let back_ctx = back.getContext('2d');
    drawCircle(back_ctx, [120, 20], [100, 100]);
    let data = back_ctx.getImageData(0, 0, W, H);
    function restoreData(ctx) {
        ctx.putImageData(data, 0, 0);
        return ctx;
    }
    let xy = [0, 0];
    setInterval(() => {
        Promise
            .resolve(back_ctx)
            .then(clearCircle)
            .then(restoreData)
            .then(ctx => drawCircle(ctx, xy, [100, 100]))
            .then(move);
    }, 20);
    function clearCircle(ctx) {
        ctx.clearRect(0, 0, W, H);
        return ctx;
    }
    function drawCircle(ctx, [x, y], [w, h]) {
        ctx.fillStyle = 'rgba(125,125,125,0.5)';
        ctx.fillRect(x, y, w, h);
        return ctx;
    }
    let q = true;
    function move() {
        if (q) {
            xy[0]++;
            if (xy[0] >= (W - 100))
                q = !q;
        }
        else {
            xy[0]--;
            if (xy[0] <= 0)
                q = !q;
        }
    }
});
//# sourceMappingURL=index.js.map

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.