Maus schweben Leinwand / Form
Ich habe diesen Code in Jquery aktiviert. Ich möchte den Deckkraftprozentsatz der einzelnen Formen beim Mouseover ändern. Normalerweise habe ich keine derartigen Probleme, aber ich weiß nicht viel über Leinwand ...
Jede Hilfe / Beratung wäre dankbar! Danke im Voraus
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();
}