Мышь наведите холст / форму
У меня есть этот код в Jquery. Я хотел бы изменить процент непрозрачности отдельных фигур при наведении курсора. У меня обычно нет таких проблем, но я не знаю много о холсте ...
Любая помощь / совет будет признателен! Заранее спасибо!
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.canvas.addEventListener('mousemove', function(event){
var mouseX = event.clientX;
var mouseY = event.clientY;
var status = document.getElementById('status');
status.innerHTML = mouseX + " | " + mouseY;
});
ctx.beginPath();
ctx.moveTo(67, 254);
ctx.lineTo(57, 180);
ctx.lineTo(87, 92);
ctx.lineTo(158, 116);
ctx.lineTo(193, 168);
ctx.lineTo(196, 244);
ctx.lineTo(135, 302);
ctx.lineTo(67, 254);
ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(211, 156);
ctx.lineTo(209, 96);
ctx.lineTo(226, 37);
ctx.lineTo(292, 49);
ctx.lineTo(307, 92);
ctx.lineTo(305, 154);
ctx.lineTo(286, 168);
ctx.lineTo(258, 157);
ctx.lineTo(254, 171);
ctx.lineTo(211, 156);
ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(230, 368);
ctx.lineTo(228, 274);
ctx.lineTo(259, 154);
ctx.lineTo(396, 202);
ctx.lineTo(406, 258);
ctx.lineTo(398, 352);
ctx.lineTo(357, 456);
ctx.lineTo(230, 368);
ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(338, 183);
ctx.lineTo(340, 132);
ctx.lineTo(357, 62);
ctx.lineTo(453, 80);
ctx.lineTo(455, 132);
ctx.lineTo(449, 196);
ctx.lineTo(428, 240);
ctx.lineTo(400, 228);
ctx.lineTo(395, 202);
ctx.lineTo(338, 183);
ctx.fillStyle = 'rgba(255, 240, 0, 0.5)';
ctx.fill();
ctx.closePath();
}