Toile HTML5 drawImage()

J'essaye de faire pivoter une carte. Je dessine la carte sur une toile cachée et après je suis en rotation pour obtenir la toile de tirage d'une autre toile. J'ai mis en place les trois premières étapes (dessiner pour masquer, faire pivoter, traduire) mais je ne pouvais pas le dernier.Pouvez-vous m'aider? Voici mon code source:Toile HTML5 drawImage()

var visibleCanvas = document.getElementById("VisibleCanvas"); 
var visibleCtx = visibleCanvas.getContext("2d"); 
visibleCtx.translate(400,300); 
visibleCtx.rotate(Math.PI); 
visibleCtx.drawImage(c,-400,-300,800,600);

c est mon caché canvas.I a essayé beaucoup de façons de tirer la carte, mais je ne pouvais pas le faire (comme dataURL etc.)

Source

2013-08-29 mekafe

Voici comment tirer d'une toile à l'autre avec un 180 degrés chiquenaude

enter image description here

// save the visibleCtx in it's unrotated state 
visibleCtx.save(); 

// rotate the visible canvas 180 degrees around its centerpoint 
visibleCtx.translate(400,300); 
visibleCtx.rotate(Math.PI); 
visibleCtx.drawImage(c,-400,-300); 

// restore the state of visibleCtx to its unrotated state for future drawings 
visibleCtx.restore()

Voici le code et un Fiddle: http://jsfiddle.net/m1erickson/2scrB/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; padding:10px;} 
    #c{border:3px solid red;} 
    #VisibleCanvas{border:3px solid green;} 
</style> 

<script> 
$(function(){ 

    var c=document.getElementById("c"); 
    var cCtx=c.getContext("2d"); 

    var visibleCanvas = document.getElementById("VisibleCanvas"); 
    var visibleCtx = visibleCanvas.getContext("2d"); 

    var img=new Image(); 
    img.onload=function(){ 

     cCtx.drawImage(img,0,0); 

     // note the image being rotated is 400x234 
     // so our transformation point is 200x117 
     visibleCtx.save() 
     visibleCtx.translate(200,117); 
     visibleCtx.rotate(Math.PI); 
     visibleCtx.drawImage(c,-200,-117); 
     visibleCtx.restore(); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png"; 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Offscreen</p> 
    <canvas id="c" width=400 height=234></canvas> 
    <p>Visible</p> 
    <canvas id="VisibleCanvas" width=400 height=234></canvas> 
</body> 
</html>

Source

2013-08-29 14:53:04 markE

Merci pour les conseils.Mais ça n'a pas fonctionné.J'essaie de dessiner une toile cachée.Alors il n'y a pas d'image dans mon code.Peut-il être le problème? – mekafe

Le code est le même (et fonctionne) si vous dessinez une image ou dessiner une carte en utilisant les lignes de contexte/courbes/etc. Comme indiqué dans ma réponse ... Assurez-vous context.drawImage (c, -400, -300) - en supposant que votre toile hors écran est 800x600. – markE

J'ai trouvé le problem.I ont des opérations asynchrones pour tirer le hiddenCanvas.So i besoin callback fonction de rotation qui canvas.Thank pour tous helping.Have une belle journée. – mekafe

Si je. comprendre la question correctement, vous voulez:

dessiner la carte sur la toile cachée;
faire pivoter le canevas visible; et
copier la carte de la toile cachée à la toile visible?

En supposant que votre toile visible a une largeur = 800 et de la hauteur = 600 ...

var visibleCanvas = document.getElementById("VisibleCanvas"); 
var visibleCtx = visibleCanvas.getContext("2d"); 
visibleCtx.translate(400,300); 
visibleCtx.rotate(Math.PI);

Retour la toile grille de coordonnées à sa position initiale

visibleCtx.translate(-400,-300);

La commande drawImage a le format :

destinationContext.drawImage (sourceElement, sourceX, sourceY, sourceWidth, sourceHeight, destX, destination, destWidth, destHeight);

... ainsi "visibleCtx.drawImage (c, -400, -300 800 600);" est en train de dire à la toile de copier la source en utilisant les coordonnées (-400, -300) - qui n'appartient pas au canevas masqué.

Au lieu de cela, utilisez ceci:

visibleCtx.drawImage(c,0,0,800,600);

Parce que la toile visible coordonnée point d'origine du système a été remis à l'angle supérieur gauche, et vous ne voulez pas redimensionner l'image copiée, vous n » Vous devez vous soucier des valeurs de destination.

Source

2013-08-29 09:40:14 KaliedaRik

Oui, vous comprenez Merci pour les conseils. Je les ai implémentés dans mon code mais ça n'a pas fonctionné à nouveau. autre chose? – mekafe

Toile HTML5 drawImage()

Répondre

Questions connexes