Hallo,
De positie op het canvas van mijn functie StopLicht wordt nu bepaald door de code in mijn functie:
[js]
ctx.drawImage(img, 64, 8,8,8,80, 0,8,8); // en zo verder
[/js]
Hoe kan ik een kopie van mijn stoplicht op het canvas zetten?
[js]
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="sprite-sheet" src="logi.bmp" alt="Logibal" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="512" height="380" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById("sprite-sheet");
function StopLicht() {
//rij x groen stoplicht
ctx.drawImage(img, 64, 8,8,8,80, 0,8,8);
ctx.drawImage(img, 72, 8,8,8,88, 0,8,8);
ctx.drawImage(img, 80, 8,8,8,80, 8,8,8);
ctx.drawImage(img, 88, 8,8,8,88, 8,8,8);
ctx.drawImage(img,112,24,8,8,80,16,8,8);
ctx.drawImage(img,120,24,8,8,88,16,8,8);
ctx.drawImage(img, 96, 8,8,8,80,24,8,8);
ctx.drawImage(img,104, 8,8,8,88,24,8,8);
}
StopLicht(); //geef het stoplicht weer.
</script>
</body>
</html>
[/js]
De positie op het canvas van mijn functie StopLicht wordt nu bepaald door de code in mijn functie:
[js]
ctx.drawImage(img, 64, 8,8,8,80, 0,8,8); // en zo verder
[/js]
Hoe kan ik een kopie van mijn stoplicht op het canvas zetten?
[js]
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="sprite-sheet" src="logi.bmp" alt="Logibal" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="512" height="380" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById("sprite-sheet");
function StopLicht() {
//rij x groen stoplicht
ctx.drawImage(img, 64, 8,8,8,80, 0,8,8);
ctx.drawImage(img, 72, 8,8,8,88, 0,8,8);
ctx.drawImage(img, 80, 8,8,8,80, 8,8,8);
ctx.drawImage(img, 88, 8,8,8,88, 8,8,8);
ctx.drawImage(img,112,24,8,8,80,16,8,8);
ctx.drawImage(img,120,24,8,8,88,16,8,8);
ctx.drawImage(img, 96, 8,8,8,80,24,8,8);
ctx.drawImage(img,104, 8,8,8,88,24,8,8);
}
StopLicht(); //geef het stoplicht weer.
</script>
</body>
</html>
[/js]
