简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  HTML5 Advanced Programming Graphic Distortion and Its Application 1 (Principles)

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

黄舟
黄舟Original
2017-03-02 13:34:201913browse

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>

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>

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>

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>

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


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5 Advanced Programming Graphic Distortion and Its Application 2 (Application)Next article：HTML5 Advanced Programming Graphic Distortion and Its Application 2 (Application)

Related articles

See more