Не я просто в принципе не знал как это делается, а про нагрузку просто мои догадки. То есть эффект наведение в canvas делается обычно методом isPointInPath? Мне в таком случае не понятно вот что. Вот нарисовал я несколько фигур в одном контексте.
Пример
То есть оба треугольника отрисованы контекстом context.
И теперь я хочу чтобы при наведении на верхний треугольник, он окрашивался в другой цвет, а нижний не изменялся.
Но как мне это сделать, если метод isPointInPath применяется сразу ко всему контексту?
var isPath = ctx.isPointInPath(50,50);
То есть наверно придётся ещё рассчитывать нужный мне треугольник?
Но с треугольниками ладно, их всего два, а мне нужно сделать карту с двумя десятками отметок, придётся создавать два десятка разных контекстов или как быть?
Код ф-ции с треугольниками:
function drawPath() {
var canvas=document.getElementById("my-canvas");
if (canvas.getContext) {
context = canvas.getContext("2d");
context.fillStyle = "rgba(255,0,0,1)";
context.beginPath();
context.moveTo(0,0);
context.lineTo(200,0);
context.lineTo(100,200);
context.fill();
context.fillStyle = "rgba(0,0,255,.3)";
context.beginPath();
context.moveTo(0,200);
context.lineTo(200,200);
context.lineTo(100,0);
context.fill();
}
}