concept:
When to draw graphics, we may often want to rotate the image, or use the graphics on the axis deformation processing, conversion processing using the Canvas API functions, you can achieve this effect.
By default, the origin is the upper left corner of the canvas Canvas coordinate axis corresponding to the (0,0), and is plotted as the coordinates of a pixel unit!
To coordinate conversion processing, the following three ways:
Translation
Using graphics context object moving coordinate axis origin translate method, this definition is: context.translate (x, y), where x represents how many units the origin of the coordinate axis moves to the left, the number of units and y represents the downward movement of the origin of the coordinate axes !
expand
Using graphics context object graphics enlarged scale method, this definition is: context.scale (x, y)
Rotation
Rotate method using graphics context object will rotate graphics, defined like this: context.rotate (angle), and the direction of rotation is clockwise, counterclockwise if you want, you can change the negative sign!
application:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>变形图形</title>
<script>
function draw(id){
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#fff";
context.fillRect(0,0,400,300);
context.translate(200,50);
context.fillStyle='rgba(255,0,0,0.25)';
for(var i=9;i<50;i++)
{
context.translate(25,25);
context.scale(0.95,0.95);
context.rotate(Math.PI/10);
context.fillRect(0,0,100,50);
}
}
</script>
</head>
<body οnlοad="draw('canvas');">
<canvas id="canvas" width="400" height="300"/>
</body>
</html>
Code references
Disclaimer: This article is the original article CSDN bloggers' Aaron Fate ", following the CC 4.0 by-sa copyright agreement, reproduced, please attach the original source link and this statement.
Original link: https: //blog.csdn.net/u010383937/article/details/72777953