Удалить холст прямоугольник граничит отведение указателя мыши

Question

Скажут, я создаю прямоугольник на холсте, как так ...

var c = document.createElement("canvas"); 
document.body.appendChild(c); 
var ctx = c.getContext("2d"); 
ctx.rect(20, 20, 150, 100); 
ctx.fillText('hover mouse here', 60, 60); 

c.addEventListener('mouseover', function() { 
    ctx.stroke(); 
}); 

Затем, когда вы перемещаете курсор над текстом, граница появляется вокруг прямоугольника. Но скажем, я хотел, чтобы граница исчезла после того, как мышь покинула область холста. Нужно ли перерисовывать весь прямоугольник или есть ли более простой способ удалить границу?

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

Я уже пробовал атрибуты стиля, но это не работает.

Вот скрипка выше кода: http://jsfiddle.net/wqbrnm0o/

Answer 1

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

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

При наведении курсора на верхний холст вы нарисовываете только «выделение».

На выводе вы можете просто очистить верхний холст. Нижнее полотно со всем другим содержимым не будет затронуто.

Вы можете установить свойство CSS pointer-events:none; на верхнем холсте, чтобы нижнее холст получал все события мыши.

Answer 2

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

var c = document.createElement("canvas"); 
 
document.body.appendChild(c); 
 
var ctx = c.getContext("2d"); 
 
ctx.rect(20, 20, 150, 100); 
 
ctx.fillText('hover mouse here', 60, 60); 
 

 
c.addEventListener('mouseover', function() { 
 
    ctx.rect(20, 20, 150, 100); 
 
    ctx.strokeStyle="#000000"; 
 
    ctx.stroke(); 
 
}); 
 
c.addEventListener('mouseleave', function() { 
 
    ctx.rect(20, 20, 150, 100); 
 
    ctx.strokeStyle="#ffffff"; 
 
    ctx.stroke(); 
 
});