Le canevas pivote-t-il à partir de l'angle d'image du centre inférieur
Comment vous faites pivoter une image avec le canvas html5 élément à partir de la partie centrale inférieure de l'angle?
<html>
<head>
<title>test</title>
<script type="text/javascript">
function startup() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'player.gif';
img.onload = function() {
ctx.translate(185, 185);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, 0, 64, 120);
}
}
</script>
</head>
<body onload='startup();'>
<canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas>
</body>
</html>
Malheureusement, cela semble le faire pivoter de gauche en haut de l'angle de l'image. Une idée?
Edit: en fin de compte l'objet (vaisseau spatial) a tourner comme une horloge pointeur, comme si c'est en tournant à droite/à gauche.
source d'informationauteur Tom | 2008-12-13
Vous devez vous connecter pour publier un commentaire.
Vous devez d'abord traduire le point autour duquel vous souhaitez faire pivoter. Dans ce cas, les dimensions de l'image sont 64 x 120. Pour tourner autour de la partie centrale du bas vous voulez traduire 32, 120.
Qui vous amène vers le bas au centre de l'image. Puis tournez la toile:
Qui tourner de 90 degrés.
Puis, quand vous dessinez l'image, essayez ceci:
? Cela fonctionne?
La bonne réponse est, bien sûr, Vincent.
J'ai tâtonné un peu avec cette rotation/translation chose, et je pense que mes petites expériences pourrait être intéressant de montrer:
Mon achoppement problème était que le positionnement de la rotation de la figure est dur, parce que c'est le long de la rotation de l'axe: soit nous avons à faire quelques trigo mathématiques, de la peinture à la primitive d'origine, ou de nous appuyer sur un secondaire caché zone de dessin, puis la peinture sur la cible.
À moins que quelqu'un d'autre a une meilleure idée?
J'ai utilisé cette, quand j'en avais besoin pour faire pivoter les textes commencé à partir de leur point spécifié (au centre)?