HTML5 deformation effect implementation, including: move, zoom, rotate, custom deformation, crop, mirror, deformation reset, etc.
The following explains in turn:
①Move/Displace
Using the translate method of the context context, we can control the position and movement of the graphics. The related methods are as follows:
context.translate(100, 100); //The movement distance of the x-axis and y-axis, here the text moves 100 pixels respectively
Using the translate method can effectively control the starting point position of the context, because the position of the context changes, the position of the drawing graph also changes, so it is convenient to draw the graph at the appropriate position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 canvas graphics displacement</title>
</head>
<body>
<!-- Add canvas tag with red border for easy viewing on the page-->
<canvas id="mycanvas" width="400" height="300"></canvas>
<script type="text/javascript">
/*Related Javascript*/
var canvas = document.getElementById('mycanvas');
context = canvas.getContext('2d'),
elementwidth = 100,
elementheight = 100;
//In order to achieve the displacement effect, use the following method:
context.translate(100, 100);
//Then draw the graphics, here we generate a rectangle
context.fillStyle = 'orange';
context.fillRect(0, 0, elementwidth, elementheight); //The coordinates of the upper left corner of this rectangle (0, 0), the width and height are both 100px
//Note: translate is called before you draw the graph
</script>
</body>
</html>
②Zoom
Using the scale method of the context context, we can control the scaling of the graphics. The related methods are as follows:
context.scale(50%, 50%); //x-axis and y-axis scalingUsing the scale method, you can effectively control the scaling of the context, because the scaling of the context changes, causing the drawing of the graph to change. Note: To control the scaling before drawing the graph
③Rotate
Use the rotate method of the context context to realize the graphics rotation effect
context.rotate(Math.PI/4); //Rotate 45 degrees clockwise
Using the rotate method, you can effectively control the rotation of the context, because the context rotation changes, resulting in changes in the drawing graphics
④Custom deformation
Using the custom deformation method of the canvas can achieve the deformation method you need, as follows:
/* * The relevant parameters are described as follows: context.transform(a,b,c,d,e,f); * a: horizontal zoom * b: horizontal tilt * c: vertical tilt * d: vertical zoom * e: horizontal displacement * f: vertical displacement */
Example: context.transform(1, 0.5, 0.5, 1, 100, 100);
Note: The deformation only affects the graphics drawing after calling the transform method
.⑤Shadow effect
// draw text shadow context.scale(1, -1); //Add some more tilt effects context.transform(1, 0, -0.7, 0.7, 0, 0); //rotated 360° context.rotate(Math.PI*2)expand:
(1) The scale() method marks the user coordinate system of the canvas
scale (sx, sy)
The scale() method adds a scale transformation to the canvas's current transformation matrix. Scaling is done with independent horizontal and vertical scaling factors. For example, passing a value of 2.0 and 0.5 will cause the drawing path to be twice the width and 1/2 the height. Specifying a negative sx value will cause the X coordinate to be folded along the Y axis, while specifying a negative sy will cause the Y coordinate to be folded along the X axis
For example: scale(1, -1) is similar to sunlight - vertical shadow
(2) The rotate() method rotates the coordinate system of the canvas
rotate(angle) //The amount of rotation, expressed in radians. Positive values indicate clockwise rotation, and negative values indicate counterclockwise rotation.
describe:
The rotate() method changes the mapping between the canvas coordinates and the pixels of the <Canvas> element in the web browser by specifying an angle, so that any subsequent drawings appear rotated on the canvas. It does not rotate the <Canvas> element itself. Note that this angle is specified in radians.
Tip: To convert degrees to radians, multiply by Math.PI and divide by 180
Example of text shadow:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 canvas graphics displacement</title>
<style type="text/css">
/*Interface CSS*/
body{
margin:0;
padding:0;
}
#mycanvas{
background: #E4E4E4; /* 画布背景色 */
}
</style>
</head>
<body>
<!-- 定义canvas元素 -->
<canvas id="mycanvas" width="400" height="300"></canvas>
<script type="text/javascript">
/*画布相关JS*/
//获取context
var canvas = document.getElementById('mycanvas'),
context = canvas.getContext('2d');
//执行位移操作
context.translate(200, 100);
//绘制文字到画布
context.font = "30pt microsoft yahei,Arial,sans-serif";
context.textAlign = "center";
context.fillStyle = "orange";
//绘制正常文字
context.fillText("Hello, gbtags!", 0, 0);
//继续位移
context.translate(0, 40);
//绘制文字阴影
context.scale(1, -1);
// context.rotate(Math.PI*2)这里旋转了360°
//再添加一些倾斜效果
context.transform(1, 0, -0.7, 0.7, 0, 0);
//最后添加阴影文字
context.textAlign = "center";
context.fillStyle = "#BFBFBF";
context.fillText("Hello, gbtags!", 0, 0);
</script>
</body>
</html>
⑥重置变形
前面我们学习了transform（变形）方法，这里介绍setTransform（重置变形）方法，它可以帮助你重置你使用transform方法生成的变形效果，代码如下：
//调用reset，重置context上下文 context.setTransform(1,0,0,1,0,0); //这里我们使用setTransform方法来重置以前的变形， //以上设置setTransform参数值为(1,0,0,1,0,0)即可保证重置画布的变形
例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas重置变形</title>
<script type = "text/javascript" src="./jquery.min.js"></script>
<style type="text/css">
/*界面CSS*/
body{
margin:0;
padding:0;
}
#mycanvas{
background: #E4E4E4; /* 画布背景色 */
}
</style>
</head>
<body>
<!-- 定义canvas元素 -->
<canvas id="mycanvas" width="400" height="300"></canvas>
<script>
/*画布相关JS*/
var canvas = document.getElementById('mycanvas'),
context = canvas.getContext('2d'),
elementwidth = 100,
elementheight = 100;
context.translate(100, 100); //将context位置移动到100, 100
//绘制一个矩形
context.fillStyle = 'orange';
context.fillRect(0, 0, elementwidth, elementheight);
//调用reset，重置context上下文
context.setTransform(1,0,0,1,0,0); //这里我们使用setTransform方法来重置以前的变形
//再次绘制一个矩形
context.fillStyle = 'black';
context.fillRect(0, 0, elementwidth, elementheight);
//现在看到使用setTransform方法的作用了吧，可以帮助我们重置context
</script>
</body>
</html>
⑦重置变形
使用context的save和restore（回复）方法可以准确的控制变形状态的保存和恢复，相关代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas重置变形</title>
<script type = "text/javascript" src="./jquery.min.js"></script>
<style type="text/css">
/*界面CSS*/
body{
margin:0;
padding:0;
}
#mycanvas{
background: #E4E4E4; /* 画布背景色 */
}
</style>
</head>
<body>
<!-- 定义canvas元素 -->
<canvas id="mycanvas" width="400" height="300"></canvas>
<script>
/*画布JS*/
var canvas = document.getElementById('mycanvas'),
context = canvas.getContext('2d'),
elementwidth = 50,
elementheight = 50;
//保存初始变形状态
context.save();
//位移变形
context.translate(100, 100);
//保存位移变形状态
context.save();
//旋转变形
context.rotate(-Math.PI/4);
//保存旋转变形状态
context.save();
//缩放变形
context.scale(2, 2);
//开始绘制图形
//第一个图形包含所有变形状态：即，位移+旋转+缩放
context.fillStyle = 'orange';
context.fillRect(0, 0, elementwidth, elementheight);
//恢复到旋转状态点
context.restore();
//第二个图形包含除了缩放以外的所有变形状态：即，位移+旋转
context.fillStyle = 'green';
context.fillRect(0, 0, elementwidth, elementheight);
//恢复到位移状态点
context.restore();
//第三个图形只包含位移变形状态：即，位移
context.fillStyle = 'black';
context.fillRect(0, 0, elementwidth, elementheight);
//恢复到初始状态点，没有任何变形状态
context.restore();
//第四个图形不包含任何的变形状态
context.fillStyle = 'red';
context.fillRect(0, 0, elementwidth, elementheight);
</script>
</body>
</html>
变形状态的保存和恢复遵循“栈”原理，即先入的后出，后入的先出，也就是先显示出来最终结果。类似一个圆桶里放置一层一层的物品，然后一层一层取出的原理类似。
拓展：
(1) The fillStyle property to set the color, gradient or pattern used to fill the drawing. The fillRect() method draws a "filled" rectangle. The default fill color is black.
context.fillRect(x,y,width,height);
Parameter Description
| x | the x coordinate of the upper left corner of the rectangle |
| and | The y coordinate of the upper left corner of the rectangle |
| width | the width of the rectangle, in pixels |
| height | the height of the rectangle, in pixels |
.