Hulp nodig om twee functies toe te voegen in java tript

Status
Niet open voor verdere reacties.

Pasha1

Nieuwe gebruiker
Lid geworden
17 jan 2023
Berichten
2
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>
 
Kan je de code tussen code-tags plaatsen met behulp van het # in de werkbalk boven de reactieinvoer?
Dan is het beter leesbaarder.
 
Hoi Aar,

Bedankt voor je reactie.

Mijn excuses is mijn eerste keer hier weet nog niet helemaal hoe het werkt. Ik hoop dat het nu wel goed is.

Alvast bedankt.

Code:
<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>


mod. code inspringen voor leesbaarheid
 
Laatst bewerkt door een moderator:
Vreselijk is een canvas; coördinaten lijntjes, figuren, enz, ppfffff.
Als je 3 extra platjes hebt met naam: bad-2.png , wc-2.png , plattegrond-2.png
dan zou de IF er zo uit kunnen zien
Code:
  if (x > 0 && x < 250 && y > 40 && y < 440) {
    activeImage = 1;
    image1.src = "./img/bad-2.png";
    image2.src = "./img/wc.png";
    image3.src = "./img/plattegrond.png";
    triangleX = 80;
    triangleY = 40;
  } else if (x > 250 && x < 500 && y > 40 && y < 440) {
    activeImage = 2;
    image1.src = "./img/bad.png";
    image2.src = "./img/wc-2.png";
    image3.src = "./img/plattegrond.png";
    triangleX = 310;
    triangleY = 40;
  } else if (x > 500 && x < 700 && y > 40 && y < 440) {
    activeImage = 3;
    image1.src = "./img/bad.png";
    image2.src = "./img/wc.png";
    image3.src = "./img/plattegrond-2.png";
    triangleX = 560;
    triangleY = 40;
  }

Je kan het zelf korter maken door sommige herhalende stukjes code in een function te zetten.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan