Positionnement sur un canevas HTML5

Je ne comprends pas bien le système de coordonnées de la zone HTML5. J'ai créé une toile 500x500 et as per this answer J'ai essayé de l'orienter dans un format cartésien plus compréhensible. Cependant, je reçois un comportement inattendu avec mon carré orange.Positionnement sur un canevas HTML5

Avec une toile de 500,500, je m'attendrais à ce qu'un fillRect(-250,-250,100,100) ait un coin en haut à gauche dans le coin supérieur gauche de la toile, mais à la place, il soit introuvable. Pour quelque raison, un fillRect(150,150,100,100) a un coin en haut à droite dans le coin supérieur droit de la toile.

Je suis désespérément confus, quelqu'un peut-il faire la lumière sur la dynamique de la toile HTML5?

drawanimation.html:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Animate Something!</title> 
    <link rel='stylesheet' href='drawanimation.css'></link> 
    <script src='drawanimation.js'></script> 
</head> 
<body onload = "draw();"> 
<canvas id="drawer" width="500" height="500"></canvas> 
</body> 
</html>

drawanimation.js

var width = 500; 
var height = 500; 

var draw = function(){ 

    var canvas = document.getElementById('drawer'); 
    var context = canvas.getContext('2d'); 
    context.save(); 
    context.clearRect(0,0,width,height); 
    context.translate(width/2,height/2); //cartesian attempt 
    //context.rotate(-Math.PI/2); //spin this thing until it's oriented right! 
    context.fillStyle = 'orange'; 
    context.fillRect(150, 150 ,100,100); 
    context.restore(); 
};

Source

2016-02-18 komali_2

Le système de coordonnées cartésiennes ne définit pas la direction de l'axe.

La norme adoptée pour l'infographie est l'origine dans le coin supérieur gauche avec l'axe X en haut à gauche de droite et l'axe y en bas de haut en bas. Ceci est généralement dû au fait que dans le passé, l'indexation dans la mémoire d'affichage correspondait à l'ordre de la ligne de balayage CRT avec le premier octet lu à l'adresse la plus basse.

Bien que cela ne soit pas valable avec les ordinateurs modernes car tous les appels de rendu sont d'abord transformés. Vous pouvez définir l'origine où vous le souhaitez et la direction de l'axe que vous voulez.

Si vous voulez que l'axe y aller du bas à gauche et l'axe des x pour aller du bas à gauche à travers à droite, puis définir la transformation à ctx.setTransform(1,0,0,-1,0,499)

Les 2 premiers chiffres sont la direction et à l'échelle d'un pixel de l'axe X, les seconds sont la direction et l'échelle des pixels pour l'axe y, et les deux derniers nombres sont l'emplacement de l'origine en adresse de pixel absolue. Donc si vous voulez l'origine en bas à droite et x de droite à gauche et y de bas en haut puis ctx.setTransform(-1,0,0,-1,499,499) mais vous devrez toujours dessiner l'objet dans les coordonnées positives.

Ou pour le système mathématique avec y up et x allant de gauche à droite avec l'origine au centre de la toile ctx.setTransform(1,0,0,-1,250,250)

Source

2016-02-18 00:45:15 Blindman67

Positionnement sur un canevas HTML5

Répondre

Questions connexes