Distorsion graphique de programmation avancée HTML5 et son application 1 (Principes)

黄舟

Libérer： 2017-03-02 13:34:20

original

2053 Les gens l'ont consulté

Plusieurs déformations en HTML5

Il existe plusieurs méthodes de déformation en HTML5 :

scale() mise à l'échelle
rotate() rotation
translate() traduction
transform () transformation matricielle
setTransform() réinitialiser la matrice

Ces méthodes peuvent compléter le traitement suivant des images

Cependant, si vous souhaitez obtenir la déformation irrégulière suivante, cela ne fonctionnera pas

Alors procédons étape par étape, regardons d'abord le HTML5 de ces méthodes.

1, la méthode de mise à l'échelle est la suivante

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="280"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.scale(0.5,0.5);
    ctx.drawImage(img,500,0);
};
</script>
</body>
</html>

Copier après la connexion

effet

2, le code de rotation

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
    ctx.rotate(20*Math.PI/180);
    ctx.drawImage(img,200,0);
};
</script>
</body>
</html>

Copier après la connexion

Effet

3, code de traduction

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.translate(100,100);
    ctx.drawImage(img,0,0);
};
</script>
</body>
</html>

Copier après la connexion

Effet

4, code d'inclinaison

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
    ctx.setTransform(1.3,0.1,-0.2,1,80,40);
    ctx.drawImage(img,0,0);
};
</script>
</body>
</html>

Copier après la connexion

effet

déformation irrégulière

Comme mentionné précédemment, HTML5 ne peut pas directement implémenter une déformation irrégulière. Cependant, une déformation irrégulière peut être obtenue grâce à une série de combinaisons, telles que la décomposition de la déformation suivante

se décompose en

Continuez ensuite à le regarder, il peut en fait être vu comme une combinaison de deux déformations, comme indiqué ci-dessous

En fait, il s'agit de combiner plusieurs déformations ensemble, de cette façon, de supprimer certaines déformations et de les reconstituer dans une nouvelle forme, et cela devient. Les graphismes spéciaux tout à l'heure

Suite à cette idée, j'ai suivi AS3 et décomposé une image en plusieurs petits triangles L'effet est le suivant

. De cette façon, la fonction drawtriangles est facilement implémentée pour déformer les graphiques. Sa fonction est fondamentalement la même que la fonction drawtriangles d'AS3. La différence est que la signification des paramètres après le 4ème est différente. Ici, le 4ème paramètre représente la division. épaisseur de la ligne. Le cinquième paramètre représente la couleur de la ligne de séparation. Si elle n'est pas définie, la ligne de séparation ne sera pas affichée. L'effet de cette fonction est le suivant. Vous pouvez obtenir n'importe quelle déformation, même 3D.

Ceci est une connexion de test. Vous pouvez faire glisser le point rouge dans l'image pour déformer l'image de quelque manière que ce soit

http://lufy.netne. .net /lufylegend-js/lufylegend-1.4/beginBitmapFill/sample01.html

Pour utiliser cette fonction drawtriangles, vous devez télécharger la version 1.5 ou supérieure du moteur open source HTML5 lufylegend L'adresse de sortie de lufylegend 1.5. est le suivant

http://blog.csdn.net/lufy_legend/article/details/8054658

Ce qui précède est le contenu de la distorsion graphique de programmation avancée HTML5 et de son application (principe), veuillez prêter attention au contenu plus connexe du site Web chinois PHP (www.php.cn) !