Canvas: Problém avec la proprité javascript context.drawImage

Question

webamon

26 Jun 2012 à 17:45

Bonjour,
J'essaye actuellement de rogner un sprite, mais je n'y arrive pas malgrés le fait que je suivent un tuto et après avoir été voir la documentation.

J'arrive a afficher mon sprite et a le positionner.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Mouvement personnage sprite</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<canvas height="600" width="600" style="border:1px solid black;" id="myCanvas"></canvas>
	<script type="text/javascript">
        $(document).ready(function(){
            var canvas = $('#myCanvas');
            var context = canvas.get(0).getContext("2d");
            

            var image = new Image();
            image.src = "sonic_sprite.png";
            $(image).load(function(){
                context.drawImage(image, -320, 0);

            });
        });

	</script>	
</body>
</html>

Ce code fonctionne, mais dés que je rajoute de nouveau élément derrière tels que : la tailel d'affichage ou le rognage cela ne marche pas.

Voici le code qui ne fonctionne pas.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Mouvement personnage sprite</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<canvas height="600" width="600" style="border:1px solid black;" id="myCanvas"></canvas>
	<script type="text/javascript">
        $(document).ready(function(){
            var canvas = $('#myCanvas');
            var context = canvas.get(0).getContext("2d");
            

            var image = new Image();
            image.src = "sonic_sprite.png";
            $(image).load(function(){
                context.drawImage(image, -320, 0, 39, 39, 30, 30, 39, 39);

            });
        });

	</script>	
</body>
</html>

Je ne comprend pas ce que je fais mal, si quelqu'un pourrait m'aider ce serait cool Smiley cligne

Sujet clos