Использование функции canvas «strokeRect» со свойством shadowBlur заполнит прямоугольный диапазон

Question

Я использую следующий код для рисования полого прямоугольника.

ctx = canvas.getContext("2d");
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
// ctx.shadowBlur    = 1;
ctx.strokeStyle = '#f00'; 
ctx.lineWidth   = 1;
ctx.strokeRect(x, y, w,h);

Все хорошо.Но когда я устанавливаю свойство ctx shadowBlur, прямоугольник заполняется.И это нормально в Firefox.

Answer 1

Вам понадобится восстановить контекст, когда вы сделаете еще один штрих.

ctx = canvas.getContext("2d");

ctx.save();
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowBlur    = 1;
ctx.strokeStyle = '#f00'; 
ctx.restore();

ctx.lineWidth   = 1;
ctx.strokeRect(x, y, w,h);

Или просто установите shadowBlur на ноль после того, как вы закончите штрих, который хотите смазать.

Answer 2

Я сообщил об ошибке в коде Google.Решением является изменение ширины линии от 1 до 1,1.И это работает.

Получить более подробную информацию можно по адресу:

Хром Выпуск 121251