Hallo allemaal,
Ik programmeer al een korte tijd en heb alles geleerd via forums zoals vele anderen. Ik heb een stuk JavaScript-code geschreven, maar ik zou er graag twee extra functies aan willen toevoegen. Helaas heb ik daar moeite mee. Daarom neem ik contact met jullie op om te zien of jullie mij kunnen helpen.
Ik heb een canvas met drie PNG-afbeeldingen erin en een gele balk bovenaan de canvas. Er is ook een driehoek die beweegt wanneer u met de muis over de PNG-afbeeldingen beweegt. Ik zou er echter nog twee functies aan willen toevoegen:
Als ik met de muis over een afbeelding beweeg, wil ik dat de afbeelding van kleur verandert "dit door een andere PNG-afbeelding in te voegen. Hoe kan ik deze functie toevoegen?
Als ik op een afbeelding klik, wil ik dat deze doorverwijst naar een andere webpagina.
Hieronder staat het stuk JavaScript-code dat ik heb geschreven.
Bij voorbaat dank voor uw hulp.
<canvas id="myCanvas" width="700" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Draw the yellow bar at the top of the canvas
ctx.fillStyle = "#fbc710";
ctx.fillRect(0, 0, canvas.width, 40);
var image1 = new Image();
image1.src = "./img/bad.png";
image1.onload = function() {
ctx.drawImage(image1, 50, 70, 110, 160);
}
var image2 = new Image();
image2.src = "./img/wc.png";
image2.onload = function() {
ctx.drawImage(image2, 280, 70, 110, 160);
}
var image3 = new Image();
image3.src = "./img/plattegrond.png";
image3.onload = function() {
ctx.drawImage(image3, 530, 70, 110, 160);
}
var activeImage = 1;
var triangleX = 80;
var triangleY = 40;
canvas.addEventListener("mousemove", function(event) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, 40);
ctx.drawImage(image1,50, 70, 110, 160);
ctx.drawImage(image2, 280, 70, 110, 160);
ctx.drawImage(image3, 530, 70, 110, 160);
var rect1 = canvas.getBoundingClientRect();
var x = event.clientX - rect1.left;
var y = event.clientY - rect1.top;
if (x > 0 && x < 250 && y > 40 && y < 440) {
activeImage = 1;
triangleX = 80;
triangleY = 40;
} else if (x > 250 && x < 500 && y > 40 && y < 440) {
activeImage = 2;
triangleX = 310;
triangleY = 40;
} else if (x > 500 && x < 700 && y > 40 && y < 440) {
activeImage = 3;
triangleX = 560;
triangleY = 40;
}
drawTriangle(triangleX,triangleY);
});
function drawTriangle(x,y) {
ctx.fillStyle = "#fbc710";
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x+40, y);
ctx.lineTo(x+20, y+40);
ctx.fill();
}
</script>
Ik programmeer al een korte tijd en heb alles geleerd via forums zoals vele anderen. Ik heb een stuk JavaScript-code geschreven, maar ik zou er graag twee extra functies aan willen toevoegen. Helaas heb ik daar moeite mee. Daarom neem ik contact met jullie op om te zien of jullie mij kunnen helpen.
Ik heb een canvas met drie PNG-afbeeldingen erin en een gele balk bovenaan de canvas. Er is ook een driehoek die beweegt wanneer u met de muis over de PNG-afbeeldingen beweegt. Ik zou er echter nog twee functies aan willen toevoegen:
Als ik met de muis over een afbeelding beweeg, wil ik dat de afbeelding van kleur verandert "dit door een andere PNG-afbeelding in te voegen. Hoe kan ik deze functie toevoegen?
Als ik op een afbeelding klik, wil ik dat deze doorverwijst naar een andere webpagina.
Hieronder staat het stuk JavaScript-code dat ik heb geschreven.
Bij voorbaat dank voor uw hulp.
<canvas id="myCanvas" width="700" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Draw the yellow bar at the top of the canvas
ctx.fillStyle = "#fbc710";
ctx.fillRect(0, 0, canvas.width, 40);
var image1 = new Image();
image1.src = "./img/bad.png";
image1.onload = function() {
ctx.drawImage(image1, 50, 70, 110, 160);
}
var image2 = new Image();
image2.src = "./img/wc.png";
image2.onload = function() {
ctx.drawImage(image2, 280, 70, 110, 160);
}
var image3 = new Image();
image3.src = "./img/plattegrond.png";
image3.onload = function() {
ctx.drawImage(image3, 530, 70, 110, 160);
}
var activeImage = 1;
var triangleX = 80;
var triangleY = 40;
canvas.addEventListener("mousemove", function(event) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, 40);
ctx.drawImage(image1,50, 70, 110, 160);
ctx.drawImage(image2, 280, 70, 110, 160);
ctx.drawImage(image3, 530, 70, 110, 160);
var rect1 = canvas.getBoundingClientRect();
var x = event.clientX - rect1.left;
var y = event.clientY - rect1.top;
if (x > 0 && x < 250 && y > 40 && y < 440) {
activeImage = 1;
triangleX = 80;
triangleY = 40;
} else if (x > 250 && x < 500 && y > 40 && y < 440) {
activeImage = 2;
triangleX = 310;
triangleY = 40;
} else if (x > 500 && x < 700 && y > 40 && y < 440) {
activeImage = 3;
triangleX = 560;
triangleY = 40;
}
drawTriangle(triangleX,triangleY);
});
function drawTriangle(x,y) {
ctx.fillStyle = "#fbc710";
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x+40, y);
ctx.lineTo(x+20, y+40);
ctx.fill();
}
</script>