Maison >interface Web >tutoriel HTML >Comment créer une matrice de transformation en utilisant HTML5 ?
Comment créer une matrice de transformation en utilisant HTML5 ?
- PHPzavant
- 2023-08-29 08:45:24606parcourir
Dans l'article suivant, nous allons apprendre comment créer une matrice de transformation avec HTML5. Le canevas HTML5 fournit des méthodes qui permettent de modifier directement la matrice de transformation. La matrice de transformation doit initialement être la transformation d'identité. être ajusté à l'aide des méthodes de transformation.
Utilisation de la méthode transform()
La matrice de transformation du contexte actuel peut être modifiée à l'aide de la méthode transform() en d'autres termes, la méthode transform() vous permet de redimensionner, faire pivoter, déplacer et incliner le contexte actuel.
Remarque− Seuls les graphiques créés après l'appel de la méthode transform() seront affectés par la transformation.
Grammaire
Voici la syntaxe de la méthode transform()
ctx.transform(m11, m12, m21, m22, dx, dy)
Utilisez la méthode set transform()
La fonction transform(a1, b1, c1, d1, e1, f1) est ensuite appelée avec les mêmes arguments après que la méthode setTransform(a1, b1, c1, d1, e1, f1) réinitialise la transformation actuelle dans la matrice d'identité.
Grammaire
Voici la syntaxe de la méthode set transform().
ctx.setTransform(m11, m12, m21, m22, dx, dy)
Regardons quelques exemples pour mieux comprendre les matrices de transformation en HTML5
Exemple 1
Dans l'exemple suivant, nous utilisons la méthode transform() pour générer un rectangle.
<!DOCTYPE html>
<html>
<body>
<canvas id="tutorial" width="300" height="400"></canvas>
<script>
var canvas = document.getElementById("tutorial");
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = "4";
var cos=Math.cos(45*Math.PI / 180);
var sin=Math.cos(45*Math.PI / 180);
ctx.transform(cos, sin, -sin, cos, 160, 20);
ctx.strokeStyle = "green";
ctx.strokeRect(60, 60, 160, 160);
ctx.stroke();
}
</script>
</body>
</html>
Lorsque le script est exécuté, il générera une sortie affichant un rectangle sur la page Web en déclenchant la méthode de transformation.
Exemple 2
Dans l'exemple ci-dessous, nous avons utilisé les méthodes transform() et set transform().
<!DOCTYPE HTML>
<html>
<head>
<script>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.translate(200, 200);
var c = 0;
for (var i=0; i <= 12; i++) {
c = Math.floor(255 / 12 * i);
ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
ctx.fillRect(0, 0, 100, 100);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.setTransform(-1, 0, 0, 1, 200, 200);
ctx.fillStyle = "rgba(100, 100, 255, 0.5)";
ctx.fillRect(50, 50, 100, 100);
}
else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id = "mycanvas" width = "400" height = "400"></canvas>
</body>
</html>
Lors de l'exécution du script ci-dessus, il générera une sortie générée en utilisant les méthodes transform() et définira les méthodes transform() sur la page Web.
Exemple 3
Dans l'exemple ci-dessous, nous créons une expression mathématique Σ n = 1.
<!DOCTYPE html>
<html>
<body onload="tutorial();">
<canvas id = "mytutorial" width = "400" height = "450"></canvas>
<script>
function tutorial() {
const ctx = document.getElementById('mytutorial').getContext('2d');
const sin = Math.sin(Math.PI / 6);
const cos = Math.cos(Math.PI / 6);
ctx.translate(100, 100);
let c = 0;
for (let i = 0; i <= 10; i++) {
c = Math.floor(255 / 12 * i);
ctx.fillStyle = `rgb(88, 214, 141 )`;
ctx.fillRect(0, 0, 100, 10);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.setTransform(-1, 0, 0, 1, 100, 100);
ctx.fillStyle = 'rgb(211, 84, 0,0.5 )';
ctx.fillRect(0, 50, 100, 100);
}
</script>
</body>
</html>
Lorsque l'utilisateur tente d'exécuter le script, il sera affiché via la sortie générée à l'aide des méthodes transform() et set transform() sur la page Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!