HTML5 canvas (deformation), html5 canvas Deformation
Coordinate Transformation
Case 1:
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.translate(200,50);
cxt.fillStyle='rgba(255,0,0,0.25)';
for(var i=0;i<40;i++)
{
cxt.translate(25,25);
cxt.scale(0.9,0.9);
cxt.rotate(Math.PI/10);
cxt.fillRect(0,0,100,50);
}
}
</script>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350">：
Note:
(1) Translation
Cxt. translate (x, y );
The translate method uses two parameters. x indicates the number of units to move the axis origin point to the left. The default value is pixel, and y indicates the number of units to move the axis origin point down.
(2) Expansion
Cxt. scale (x, y );
The scale method uses two parameters. x is the magnification of the horizontal direction, and y is the magnification of the vertical direction, set these two parameters to a decimal point between 0 and 1. For example, 0.5 means to reduce the image by half.
(3) Rotating
Cxt. rotate (angle );
The rotate method accepts the angle Parameter. angle refers to the rotation angle, and the center of the rotation is the origin of the coordinate axis. The rotation is in the clockwise direction. You can set the angle to a negative value to counter-clockwise rotation.
Case 2
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Script>
Function draw (){
Var c = document. getElementById ("myCanvas ");
Var cxt = c. getContext ("2d ");
Cxt. fillStyle = "# eeeeff ";
Cxt. fillRect (400,320 );
Cxt. translate (60, 60 );
For (var I = 0; I <6; I ++)
{
Cxt. translate (50, 50 );
Cxt. scale (0.8, 0.8 );
Cxt. rotate (Math. PI/10 );
CreateStar (cxt );
Cxt. fill ();
}
Function createStar (cxt ){
Var n = 0;
Var dx = 0;
Var dy = 0;
Var s = 50;
Cxt. beginPath ();
Cxt. fillStyle = 'rgba (0.5, 0 )';
Var x = Math. sin (0 );
Var y = Math. cos (0 );
Var dig = Math. PI/5*4;
For (var I = 0; I <5; I ++)
{
Var x = Math. sin (I * dig );
Var y = Math. cos (I * dig );
Cxt. lineTo (dx + x * s, dy + y * s );
}
Cxt. closePath ();
}
}
</Script>
</Head>
<Body onload = "draw ()">
<Canvas id = "myCanvas" width = "450" height = "350">:
Note:
(1) If you want to deform the rectangle, it is enough to use coordinate transformation.
(2) In the createStar function, only one pentagram is created. Due to coordinate axis transformation, in the Canvas, the pentagram is scaled down and rotated, and a new pentagram is generated, the new star uses the same method to draw a string of deformation stars.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
