HTML5 Advanced Programming Graphic Distortion and Its Application 1 (Principles)

黄舟

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

Original

1949 people have browsed it

Several deformations in HTML5

There are several methods for deformation in HTML5:

scale() scaling
rotate() rotation
translate() translation
transform() Matrix transformation
setTransform() Reset matrix

These methods can complete the following processing of pictures

However, if you want to achieve the following irregular deformation, it will not work

Let’s take a step by step, first look at HTML5 of these methods.

1, the scaling method is as follows

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

Copy after login

Effect

2, the rotation code

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

Copy after login

Effect

3, translation code

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

Copy after login

Effect

4, tilt code

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

Copy after login

Effect

Irregular deformation

mentioned above Note that HTML5 cannot directly implement irregular deformation, but it can be achieved through a series of combinations, such as decomposing the following deformation

# #After decomposition it becomes

Then continue to look at it, it can actually be seen as a combination of two deformations, as shown below

In fact, it is to combine multiple deformations together. In this way, take out some of the deformations and piece them together into a new shape, and it becomes the special shape just now

Following this idea, I followed AS3 and decomposed a picture into multiple small triangles. The effect is as follows

That’s it, very easy The drawtriangles function is implemented to distort graphics. Its function is basically the same as the drawtriangles function of AS3. The difference is that the meaning of the parameters after the 4th is different. Here the 4th parameter represents the line thickness of the dividing line, and the 5th parameter represents the line thickness of the dividing line. The parameter represents the color of the dividing line. If not set, the dividing line will not be displayed. The effect of this function is as follows. You can achieve any deformation, even 3D deformation.

This is a test connection. You can drag the red dot in the picture to distort the picture in any way

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

To use this drawtriangles function, you need to download version 1.5 or above of the HTML5 open source engine lufylegend. The release address of lufylegend version 1.5 is as follows

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

The above is the content of HTML5 Advanced Programming Graphic Distortion and Its Application (Principles). For more related content, please pay attention to the PHP Chinese website (www.php. cn)!