HTML5 Advanced Programming Graphic Distortion und seine Anwendung 1 (Grundsätze)

黄舟

Freigeben： 2017-03-02 13:34:20

Original

1969 Leute haben es durchsucht

Mehrere Verformungen in HTML5

Es gibt mehrere Methoden zur Verformung in HTML5:

scale() scaling
rotate() rotation
translate() translation
transform () Matrixtransformation
setTransform() Matrix zurücksetzen

Diese Methoden können die folgende Verarbeitung von Bildern abschließen

Allerdings Wenn Sie die folgende unregelmäßige Verformung erreichen möchten, funktioniert dies nicht

Dann gehen wir Schritt für Schritt vor und schauen uns zunächst HTML5 dieser Methoden an.

1, die Skalierungsmethode ist wie folgt

<!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>

Nach dem Login kopieren

Effekt

2, der Rotationscode

<!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>

Nach dem Login kopieren

Wirkung

3, Übersetzungscode

<!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>

Nach dem Login kopieren

Wirkung

4, Neigungscode

<!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>

Nach dem Login kopieren

Wirkung

Unregelmäßige Verformung

Wie bereits erwähnt, kann HTML5 eine unregelmäßige Verformung nicht direkt implementieren. Eine unregelmäßige Verformung kann jedoch durch eine Reihe von Kombinationen erreicht werden, z. B. durch Zerlegen der folgenden Verformung

zerfällt in

Betrachten Sie es dann weiter, es kann tatsächlich als eine Kombination aus zwei Verformungen angesehen werden, wie unten gezeigt

Tatsächlich geht es darum, mehrere Verformungen miteinander zu kombinieren. Auf diese Weise werden einige der Verformungen herausgenommen und zu einer neuen Form zusammengefügt, und es entsteht Die spezielle Grafik gerade

Dieser Idee folgend folgte ich AS3 und zerlegte ein Bild in mehrere kleine Dreiecke. Der Effekt ist wie folgt

Auf diese Weise lässt sich die Drawtriangles-Funktion leicht implementieren, um Grafiken zu verzerren. Der Unterschied besteht darin, dass die Bedeutung der Parameter nach dem 4. Parameter unterschiedlich ist Der fünfte Parameter stellt die Farbe der Trennlinie dar. Wenn er nicht festgelegt ist, wird die Trennlinie wie folgt angezeigt: Sie können jede Verformung erzielen, auch keine 3D-Verformung

Dies ist eine Testverbindung. Sie können den roten Punkt im Bild ziehen, um das Bild auf beliebige Weise zu verzerren

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

Um diese Drawtriangles-Funktion zu verwenden, müssen Sie Version 1.5 oder höher der HTML5-Open-Source-Engine lufylegend herunterladen. Die Veröffentlichungsadresse von lufylegend 1.5 ist wie folgt

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

Das Obige ist der Inhalt von HTML5 Advanced Programming Graphic Distortion und seiner Anwendung (Prinzip), Bitte achten Sie auf weitere verwandte Inhalte auf der chinesischen PHP-Website (m.sbmmt.com)!