Очистка strokeRect() на холсте HTML5

Я могу нарисовать квадрат с рамкой на моем холсте отлично. Однако, когда я пытаюсь очистить эту квадратную форму с помощью функции clearRect(), некоторые штрихи не очищаются.Очистка strokeRect() на холсте HTML5

HTML

<div> 
    <canvas width="300" height="250"> 
    </canvas> 
</div>

var $context = $('canvas')[0].getContext('2d'); 

// Create 4 filled squares 
$context.fillStyle = 'pink'; 
$context.fillRect(120, 0, 30, 30); 
$context.fillRect(120, 30, 30, 30); 
$context.fillRect(150, 0, 30, 30); 
$context.fillRect(150, 30, 30, 30); 

// Create borders around them 
$context.strokeRect(120, 0, 30, 30); 
$context.strokeRect(120, 30, 30, 30); 
$context.strokeRect(150, 0, 30, 30); 
$context.strokeRect(150, 30, 30, 30); 

// Now erase the squares (individually) 
$context.clearRect(120, 0, 30, 30); 
$context.clearRect(120, 30, 30, 30); 
$context.clearRect(150, 0, 30, 30); 
$context.clearRect(150, 30, 30, 30);

См jsFiddle here.

После более тщательного изучения кажется, что функция clearRect() на самом деле не очищает штрих от моего звонка strokeRect(). Поэтому я подумал, может быть, мне нужно просто погладить границу с strokeStyle‘white’. Однако, когда я это делаю (новая скрипка here), кажется, что это красит белый штрих, но только с альфа-значением 128! Мой globalAlpha установлен в 1 ... разве это не должно быть полностью непрозрачным?

Что я не понимаю здесь? clearRect() нечеткие звонки на strokeRect()? А если нет, должно ли решение погладить существующий strokeRect(), но с цветом белого?

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

Заранее благодарен!

источник

2014-10-03 d m

'clearRect()' отлично работает. Стокс имеет ширину, когда они нарисованы. Как на внешней, так и на внутренней сторонах было нарисовано. Вам просто нужно расширить 'clearRect'. Также обратите внимание, что 'stroke' имеет для них некоторую альфу. –

@SpencerWieczorek - Не знаете, как «расширить» функцию clearRect(). Я попробовал установить 'lineWidth' в 2 вместо значения по умолчанию 1 прямо перед вызовом' clearRect() ', но это не так много. Как конкретно вы устанавливаете внешние и внутренние стороны для очистки прямоугольника? –

Имейте 'clearRect()' накройте еще 1 пиксель в каждом направлении. Например, чтобы очистить область «30x30», очистите «32x32». –

Все работает правильно. Границы через strokeRect добавьте высоту и ширину в форму, равную lineWidth. clearRect не причудливая функция, она просто работает как ластик - удаление «краски» только из области, которую вы указываете.

В вашем примере lineWidth является по умолчанию 1. Ваш код рисует прямоугольники 30х30, а затем применяет границу через ход ширины 1. Результирующая форма является 32х32 - в результате 1 + 30 + 1

чтобы очистить всю эту вещь, вы должны настроить вашу математику немного:

$context.clearRect(119, -1, 32, 32); 
$context.clearRect(119, 29, 32, 32); 
$context.clearRect(149, -1, 32, 32); 
$context.clearRect(149, 29, 32, 32);

Это двигается по одному х и один у координат, а также увеличивает размер прозрачного, чтобы покрыть границу, а также сама форма.

jsfiddle: http://jsfiddle.net/fg6fmjhb/2/

источник

2014-10-03 07:31:52 Michal

Вы также можете сделать это:

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

Это полностью очистить контекст холста.

источник

2016-04-19 05:08:36 Navya

Очистка strokeRect() на холсте HTML5

ответ

Смежные вопросы