Изменить позицию canvas html5

157

21 ноября 2018, 19:30

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

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

...
ctx.fillStyle = '#f50';
ctx.fillRect( 20, 20, 100, 50 );
...

Answer 1

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

нет

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

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

14:06
21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16

Все вопросы

ТОП-10

Все популярные вопросы

Как парсить HTML который создается через JavaScript? [закрыт]

как парсить HTML который создается через JS JavaScript то есть динамическую страницу, JSOUP с этим не справился это то и ясно, хотел попробовать через...

171

javascript