Як очистити полотно для перемальовування

Після експериментів із композиційними операціями та малюванням зображень на полотні я зараз намагаюся видалити зображення та композицію. Як це зробити?

Мені потрібно очистити полотно для перемальовування інших зображень; це може тривати деякий час, тому я не думаю, що малювання нового прямокутника кожного разу буде найбільш ефективним варіантом.

const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

Використання: context.clearRect(0, 0, canvas.width, canvas.height);

Це найшвидший і описовий спосіб очистити все полотно.

Не використовувати: canvas.width = canvas.width;

Скидання canvas.widthскидає всі стани полотна (наприклад, перетворення, ширину рядка, strokeStyle тощо), воно дуже повільне (порівняно з clearRect), воно працює не у всіх браузерах, і не описує те, що ви насправді намагаєтеся зробити.

Робота з трансформованими координатами

Якщо ви змінили матрицю перетворення (наприклад, використовуючи scale, rotateабо translate), то context.clearRect(0,0,canvas.width,canvas.height), ймовірно, не буде очищена вся видима частина полотна.

Рішення? Скиньте матрицю перетворення до очищення полотна:

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

Редагувати: Я тільки що проробив профілювання, і (в Chrome) на 10% швидше очистити полотно розміром 300x150 (розмір за замовчуванням), не скидаючи перетворення. Зі збільшенням розміру полотна ця різниця зменшується.

Це вже відносно незначно, але в більшості випадків ви будете малювати значно більше, ніж очищаєте, і я вважаю, що ця різниця у виконанні не має значення.

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

Якщо ви малюєте лінії, не забудьте:

context.beginPath();

Інакше лінії не будуть очищені.

Інші вже виконали чудову роботу, відповідаючи на запитання, але якщо простий clear()метод на контекстному об'єкті був би корисним для вас (це було для мене), це реалізація, яку я використовую на основі відповідей тут:

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

Використання:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

• Chrome добре реагує на: context.clearRect ( x , y , w , h );як це запропонував @ Pentium10, але IE9, здається, повністю ігнорує цю інструкцію.
• IE9, схоже, відповідає: canvas.width = canvas.width;але він не чіткі лінії, а лише фігури, зображення та інші об'єкти, якщо ви також не використовуєте рішення @John Allsopp про першу зміну ширини.

Тож якщо у вас є полотно та контекст, створені так:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

Ви можете використовувати такий метод:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

Це 2018 рік, і досі немає рідного методу, щоб повністю очистити полотно для перемальовування. clearRect() не очищає полотно повністю. Малюнки типу незаливки не очищаються (напр. rect())

1.Дль повністю очистити полотно незалежно від того , як ви малюєте:

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

Плюси: зберігає StroStyle, fillStyle тощо; Немає відставання;

Мінуси: непотрібно, якщо ви вже використовуєте startPath, перш ніж щось малювати

2. Використання ширини / висоти злому:

context.canvas.width = context.canvas.width;

АБО

context.canvas.height = context.canvas.height;

Плюси: працює з мінусами IE: скидає StroStyle, fillStyle на чорний; Лаггі;

Мені було цікаво, чому рідного рішення не існує. Насправді, clearRect()це розглядається як єдине рішення, тому що більшість користувачів роблять beginPath()перед тим, як намалювати будь-який новий шлях. Хоча BeginPath слід використовувати лише під час малювання ліній, а не на закритому шляхуrect().

Це причина, чому прийнята відповідь не вирішила моєї проблеми, і я закінчив витрачати години на спроби різних хак. Проклинаю мозилу

Використовуйте метод clearRect, передаючи координати x, y та висоту та ширину полотна. ClearRect очистить цілі полотна як:

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

тут є багато хороших відповідей. Ще одна зауваження полягає в тому, що іноді цікаво лише частково очистити полотно. тобто "згасає" попереднє зображення, а не видаляти його повністю. це може дати приємні сліди.

це легко. припустимо, що ваш колір тла білий:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

Швидкий шлях - це зробити

canvas.width = canvas.width

Айк, як це працює, але це робить!

Це те, що я використовую, незалежно від меж та перетворень матриці:

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

В основному, він зберігає поточний стан контексту і малює прозорий піксель з copyа globalCompositeOperation. Потім відновлює попередній стан контексту.

Це працювало для моєї pieChart в chart.js

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

Я виявив, що в усіх браузерах, які я тестую, найшвидший спосіб - це фактично заповнитиRect білим або будь-яким кольором, який ви хочете. У мене дуже великий монітор, і в повноекранному режимі clearRect агонізує повільно, але fillRect є розумним.

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

Недолік - те, що полотно більше не прозоре.

у webkit потрібно встановити ширину на інше значення, тоді ви можете встановити її до початкового значення

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

Простий, але не дуже читаний спосіб - це написати:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

Я завжди користуюся

cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);

context.clearRect(0,0,w,h)   

заповніть заданий прямокутник значеннями RGBA:
0 0 0 0: за допомогою Chrome
0 0 0 255: FF і Safari

Але

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

нехай прямокутник заповнюється
0 0 0 255
незалежно від браузера!

Context.clearRect(starting width, starting height, ending width, ending height);

Приклад: context.clearRect(0, 0, canvas.width, canvas.height);

найкоротший шлях:

canvas.width += 0

найшвидший спосіб:

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

Якщо ви використовуєте тільки clearRect, якщо у вас є форма для подання малюнка, ви отримаєте подання замість поля очищення, або, можливо, він може бути очищений спочатку, а потім завантажити недійсний малюнок, тому вам потрібно буде додати prevenDefault під час початку функції:

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

Сподіваюся, це комусь допоможе.

Я завжди цим користуюся

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

ПРИМІТКА

поєднання clearRect і requestAnimationFrame дозволяє отримати більш флюїдну анімацію, якщо саме так ви збираєтеся

Це все чудові приклади того, як ви очищаєте стандартне полотно, але якщо ви використовуєте paperjs, це спрацює:

Визначте глобальну змінну в JavaScript:

var clearCanvas = false;

З вашого PaperScript визначте:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

Тепер, де ви встановите clearCanvas на істинне, воно очистить усі елементи з екрана.