Min kod fungerar inte , försöker få min bild att flytta sig med hjälp av piltangenterna, är det någon som ser vart jag har gjort fel?
Edit: Glömde att tillägga har console.log endast för att se ifall knapptryckningarna registreras vilket de inte gör
Edit: Glömde att tillägga har console.log endast för att se ifall knapptryckningarna registreras vilket de inte gör
Kod:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Laboration 1: Canvas Animering</title>
<style type="text/css"> </style>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #c3c3c3;">
Canvas fungerar inte med din webbläsare
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var minBild = new Image();
minBild.src = "Lab1.png";
var x = 0;
var y = 0;
//Bilden
minBild.addEventListener("load", ritaAllt, false);
canvas.addEventListener("keypress", update, false);
function ritaAllt() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(minBild, x, y, 50, 50)
// Fyrkanten
context.fillStyle="#FF0000";
context.fillRect(205,10,100,100);
//Cirkeln
context.beginPath();
context.arc(250, 200, 60, 0, 2 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
//Halvmåne
context.beginPath();
context.arc(250, 300, 70, 3.5, 0.5, true);
context.closePath();
context.fillStyle = 'green';
context.fill();
context.strokeStyle = '#550000';
context.stroke();
}
function update(event) {
if (event.keyCode == 37) {
console.log("vänster");
}
if (event.keyCode == 38) {
console.log("upp");
}
if (event.keyCode == 39) {
console.log("höger");
}
if (event.keyCode == 40) {
console.log("ner");
}
ritaAllt();
}
</script>
</body>
</html>