Canvas star and graphic conversion, canvas star Conversion

Canvas star and graphic conversion, canvas star Conversion

Graph conversion.

1. Draw a starry sky

First draw a canvas. width wide canvas. height black star, then draw 200 random positions, random size, random rotation angle of the stars.

Window. onload = function () {var canvas = document. getElementById ("canvas"); canvas. width = 800; canvas. height = 800; var context = canvas. getContext ("2d"); context. fillStyle = "black"; context. fillRect (0, 0, canvas. width, canvas. height); for (var I = 0; I <200; I ++) {var r = Math. random () * 10 + 10; var x = Math. random () * canvas. width; var y = Math. random () * canvas. height; var a = Math. random () * 360; drawStar (context, x, y, r, r/2.0, a) ;}// rot clockwise rotation angle function drawStar (ctx, x, y, r, R, rot) {ctx. beginPath (); // converts degrees to radians: divided by 180 * PI for (var I = 0; I <5; I ++) {ctx. lineTo (Math. cos (18 + I * 72-rot)/180 * Math. PI) * R + x,-Math. sin (18 + I * 72-rot)/180 * Math. PI) * R + y); ctx. lineTo (Math. cos (54 + I * 72-rot)/180 * Math. PI) * r + x,-Math. sin (54 + I * 72-rot)/180 * Math. PI) * r + y);} ctx. closePath (); ctx. fillStyle = "# fb3"; ctx. strokeStyle = "# fd5"; ctx. lineWidth = 3; ctx. lineJoin = "round"; ctx. fill (); ctx. stroke ();}View Code

Produce a flat design with 200 stars.

Ii. Image Transformation and State Preservation 1. reconstruction using the standard path + graphics transformation idea

The above drawStar function carries too many functions, specifying the entire drawing path, and combining the displacement, size, and rotation of the pentagram into a function.

If you want to draw a star shape? Hexagonal? It is troublesome to change the code.

Standard Practice: Modify the function structure.

The interface remains unchanged, saving the Rotation Angle and drawing a standard star. Assume that the outer circle radius is twice the inner circle radius, so you only need to input a small r. Call a startPath () function in drawStar to draw a standard five-star path.

Standard Five-star path: Only one context is input, and a large circle radius of 1 is drawn at (0, 0) without any offset or any rotation of the five-star.

After the standard pentagram is drawn in drawStar, the displacement of the standard pentagram is changed to the position (x, y) Through graphical transformation. The size is changed to R, and the rot angle is rotated at the same time. Then, draw the image.

Such a design structure can avoid previous problems. For example, if you want to draw a hexagonal or star shape, you only need to change the code for path ing in starPath.

More advanced reuse: The starPath () function is passed into drawStar () as a parameter. In this way, drawStar can be called a drawSheap user to draw any image. You only need to input the standard path for drawing the image, change the displacement, size, and rotation.

// Rot clockwise rotation angle function drawStar (ctx, x, y, r, R, rot) {starPath (ctx); // the size of the rot drawn in (x, y) is R, rotate the rot degree of the pentagram //...}
Function starPath (ctx) {ctx. beginPath (); // converts degrees to radians: divided by 180 * PI for (var I = 0; I <5; I ++) {ctx. lineTo (Math. cos (18 + I * 72)/180 * Math. PI),-Math. sin (18 + I * 72)/180 * Math. PI); ctx. lineTo (Math. cos (54 + I * 72)/180 * Math. PI),-Math. sin (54 + I * 72)/180 * Math. PI);} ctx. closePath ();}

Summary: Draw a standard path in graphics, and then convert the image to the desired size.

2. Graphic Transformation

Three basic operations:

• Displacement translate (x, y)
• Rotate (deg)
• Scale (sx, sy)

Translate Overlays

After two translate steps, the green square reaches (200,200 ). This is not what the code looks like (150,150 ).

Window. onload = function () {var canvas = document. getElementById ("canvas"); canvas. width = 400; canvas. height = 400; var context = canvas. getContext ("2d"); context. fillStyle = "red"; context. translate (50, 50); context. fillRect (0,0, 200,200); context. fillStyle = "green"; context. translate (150,150); context. fillRect (200,200 );}View Code

To avoid the above problems,Best practicesAfter the graphic transformation is used, reverse operations are performed to reverse the result of the graphic transformation. As follows:

Window. onload = function () {var canvas = document. getElementById ("canvas"); canvas. width = 400; canvas. height = 400; var context = canvas. getContext ("2d"); context. fillStyle = "red"; context. translate (50, 50); context. fillRect (0,0, 200,200); context. translate (-50,-50); // reverse context. fillStyle = "green"; context. translate (150,150); context. fillRect (0,0, 200,200); context. translate (-150,-150); // reverse operation}View Code

3. save () and restore () of the canvas status ()

It is too troublesome to reverse graph conversion. canvas provides a save () API to save the current graph state. The state includes all the states we set, and naturally includes the state of graph transformation.

After the graphic transformation is completed and the specific drawing is completed, context. restore () is called again at the end ().

Restore () and save () appear in pairs. restore () returns all the canvas States when saving (). This is a very good way to keep the canvas drawing state, you can change the canvas state between save () and restore () without affecting the subsequent rendering effect.

Window. onload = function () {var canvas = document. getElementById ("canvas"); canvas. width = 400; canvas. height = 400; var context = canvas. getContext ("2d"); context. save (); context. fillStyle = "red"; context. translate (50, 50); context. fillRect (0, 0, 200,200); // context. translate (-50,-50); // reverse context. restore (); context. save () context. fillStyle = "green"; context. translate (150,150); context. fillRect (0, 0, 200,200); // context. translate (-150,-150); // reverse context. restore ();}

Note: Draw the overall element, especially when using the graphic transformation, you should save () first, and then restore () at the end of the painting to ensure that the canvas image is correctly drawn.

3. Apply translate, rotate and scale1, and use translate and rotate to draw stars of fixed sizes.

Scale is not used.

Ctx. translate (x, y); ctx. rotate (rot/180 * Math. PI); window. onload = function () {var canvas = document. getElementById ("canvas"); canvas. width = 800; canvas. height = 800; var context = canvas. getContext ("2d"); context. fillStyle = "black"; context. fillRect (0, 0, canvas. width, canvas. height); for (var I = 0; I <200; I ++) {var r = Math. random () * 10 + 10; var x = Math. random () * canvas. width; var y = Math. random () * canvas. height; var a = Math. random () * 360; drawStar (context, x, y, r, a) ;}// rot clockwise rotation angle function drawStar (ctx, x, y, R, rot) {ctx. save (); ctx. translate (x, y); ctx. rotate (rot/180 * Math. PI); starPath (ctx); // The Star ctx is drawn at (x, y) degrees R and rot Degrees are rotated. fillStyle = "# fb3"; ctx. strokeStyle = "# fd5"; ctx. lineWidth = 3; ctx. lineJoin = "round"; ctx. fill (); ctx. stroke (); ctx. restore ();} function starPath (ctx) {ctx. beginPath (); // converts degrees to radians: divided by 180 * PI for (var I = 0; I <5; I ++) {ctx. lineTo (Math. cos (18 + I * 72)/180 * Math. PI) * 20,-Math. sin (18 + I * 72)/180 * Math. PI) * 20); ctx. lineTo (Math. cos (54 + I * 72)/180 * Math. PI) * 0.5*20,-Math. sin (54 + I * 72)/180 * Math. PI) * 0.5*20);} ctx. closePath ();}View Code

The effect is the same as the image above.

2. Side effects of scale

Not only the size, but also the coordinates and borders.

 var canvas=document.getElementById("canvas");    canvas.width=400;    canvas.height=400;    var context=canvas.getContext("2d");    context.save();    context.scale(1,1);    context.strokeRect(10,10,100,100);    context.restore();    context.save()    context.scale(2,2,);    context.strokeRect(10,10,100,100);    context.restore();    context.save()    context.scale(3,3,);    context.strokeRect(10,10,100,100);    context.restore();}   

3. Use scale to draw stars

The coordinates are transformed by translate, always (0, 0), so after scale or (0, 0 ).

Discard the drawing of the outer border.

Window. onload = function () {var canvas = document. getElementById ("canvas"); canvas. width = 800; canvas. height = 800; var context = canvas. getContext ("2d"); context. fillStyle = "black"; context. fillRect (0, 0, canvas. width, canvas. height); for (var I = 0; I <200; I ++) {var r = Math. random () * 10 + 10; var x = Math. random () * canvas. width; var y = Math. random () * canvas. height; var a = Math. random () * 360; drawStar (context, x, y, r, a) ;}// rot clockwise rotation angle function drawStar (ctx, x, y, R, rot) {ctx. save (); ctx. translate (x, y); ctx. rotate (rot/180 * Math. PI); ctx. scale (R, R); starPath (ctx); // The Star ctx that is drawn at (x, y) degrees R and rot rotation. fillStyle = "# fb3"; // discard the drawing of the outer border // ctx. strokeStyle = "# fd5"; // ctx. lineWidth = 3; // ctx. lineJoin = "round"; ctx. fill (); // ctx. stroke (); ctx. restore ();} function starPath (ctx) {ctx. beginPath (); // converts degrees to radians: divided by 180 * PI for (var I = 0; I <5; I ++) {ctx. lineTo (Math. cos (18 + I * 72)/180 * Math. PI),-Math. sin (18 + I * 72)/180 * Math. PI); ctx. lineTo (Math. cos (54 + I * 72)/180 * Math. PI) * 0.5,-Math. sin (54 + I * 72)/180 * Math. PI) * 0.5);} ctx. closePath ();}View Code

The stars have no outer border.

4. deep understanding of graphic Transformation

The essence of graph transformation is to re-calculate the vertex coordinates of the graph. The computing process is completed through the transformation matrix.

The two-dimensional transformation matrix is 3*3, and the three-dimensional transformation matrix is 4*4.

You can use transform (a, B, c, d, e, f) to set the transformation matrix based on the previous settings.

SetTransform (a, B, c, d, e, f) can be used to ignore all previous transformation matrices. First set to the unit matrix and then transform.

Window. onload = function () {var canvas = document. getElementById ("canvas"); canvas. width = 400; canvas. height = 400; var context = canvas. getContext ("2d"); context. fillStyle = "red"; context. strokeStyle = "#058"; context. lineWidth = 5; /// // a c e // B d f/ /0 0 1 //, d horizontal, vertical scaling // B, c horizontal, vertical skew // e, f horizontal, vertical Displacement // context. save (); // context. transform (,); // transform cascade context. transform (50,100,); context. transform (1.5, 0,); context. transform (1,-0.2,-0.2, 0, 0); // setTransform () only uses the current transform context. setTransform (100,100,); context. fillRect (50, 50, 100,100); context. strokeRect (50, 50, 100,100); context. restore ();}

This part of content is essentially the same as the content of css3 animations, and is the content of graphics.

For details about css3 animation, refer to my previous blog:

Deformation and animation in css3 (1)

Deformation and animation in css3 (2)

Deformation and animation in css3 (3)

 

Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the source: http://www.cnblogs.com/starof/p/8626422.html has questions welcome to discuss with me and make progress together.