Возможно ли изменить позицию фигуры в канвасе, без того, чтоб все очищать
нет
не хотелось бы все очищать и заново перерисовывать
тут есть как минимум два варианта:
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