Hello, my dear friends, I despise the front end of myself, write blogs for the first time, and do not write well, please forgive me to understand.
Before teaching, I think you are smart. You have mastered the basic canvas basic operation method. If you do n’t know much about Canvas, then I suggest you go to http://www.w3school.com.cn/html_ref_canvasp Familiar with it here;
OKEY! The picture below is the simple effect after our completion. The heart is not as good as action, so let's make a simple drawing!
1. Define canvasFirst of all, we now insert the <CANVAS> tag in the HTML file to define the size of the canvas. I define the size of the canvas here 800*600 pixels. At the same time, the background color of Canvas is set in the internal style table (to watch when it is convenient for drawing);
<! Doctype html> <html Lang = EN> <Head> <meta charset = UTF-8> <Title> Document </title> <Style Type = Text/CSS> Body {Padding: 0; MARGIN: 0;} # Canvas {background:#5151a2;} </style> </head> <body> <canvas id = canvas width = 800 height = 600> </body> </html>The next core is to draw a windmill in the native JS environment; obtain the Canvas element object through the JS DOM operation method, and obtain the 2D drawing context through GetContex (2D). Through this method, it is like telling the browser. Draw 2D graphics on the canvas;
<script type = Text/Javascript> // Get the 2D context of getting the canvas.2. Draw the windmill base
The geometric figure of the windmill base looks like a slender and slender trapezoid. We can draw a trapezoidal and then fill the color. Here, in order to achieve a relatively good effect, the color gradient method is used; OKEY! Look directly at the code ~~!
// Define a function, the bottom base of the packaging windmill function Buttom () {ctx.beginpath (); // Start a new drawing path var liner = ctx.createlineArgient (390,600,410,600); -Starting point-endpoint) Liner.addcolorsstop (0,#ccc); // Set the starting point color liner.addcolorsstop (0.5,#FFF); // Set the midpoint color liner.addcolorsstop (1,#ccc); // Set the end point Color ctx.fillstyle = liner; // The filling method of trapezoidal is set to variable (gradient color) CTX.MOVETO (395,300); // Lifn our brushes, starting at the starting point to (395,300) CTX.Lineto (405,300); // Connect Starting point drawing line ctx.lineto (410,600); ctx.lineto (390,600); ctx.closepath (); // Close path ctx.fill (); // Fill the trapezoidal} buttom (); // Browser displayLet's take a look at the effect in the page, is it simple?
(I feel that I am a bit too much ~! ~!)
3. Draw the leavesThe next part will be the most critical place in this animation. First of all, let's analyze the structure of the leaves. The three leaves are 120 °, and the shape of each leaf is the same; they have a round heart, and you may also have in your heart. Question, first draw your heart or leave the leaves first? How should the shape of the leaves be drawn? Can the leaves be copied and pasted? The answer is certainly okay, let's do it!
Thinking analysis:
1) Because the shape of the three leaves is exactly the same, we only need to draw a leaf. The second and third leaves are COPY. Should we pack a function to encapsulate the painting method of this leaf? Just call it the bind () function! Intersection Just call it! Why! Your TM is too smart
2) Three leaves have a round heart. When drawing leaves, in order to facilitate the coordinate value, we will move the top of the trapezoidal top from the upper left corner of the drawing. This will be much more convenient to draw the leaves! The translate () method is used here, the mobile coordinate system!
3) The hardest point is to understand how the animation is realized here, because the animation principle will affect the document structure of our painting: the structure of the leaves:
First of all, we create a new drawing environment, we call it environment 1, we draw the first leaf on the environment 1; then rotate 120 ° to create the first drawing environment 2 under the premise of the first drawing environment. The function of calling the leaf on the upside (), draw the two leaves; the drawing method of the third leaf is made, rotating 120 ° based on the environment 2, the new environment 3, call the leaf function Bind () painting third leaf. ;;
If we want to achieve animation, we only need to rotate the drawing environment 1 of the first leaf. The second leaf and the third leaf are drawn by reference environment 1 as the benchmark. Is it also moved? Intersection Barrage: 6666666
4) In the end, some basic appearance styles are debugged! Such as gradients, transparency, etc.!
Draw the leavesWhen I painted this leaf shape, I was slowly debugged. My aesthetic is quite low. Forgive me for only drawing such leaves. Of course, students with rich imagination can be drawn according to my preference, but the general thinking is consistent;
Here I declare a variable var num = 0;, as a parameter of the changes in the number of rotation of the environment: then let's look at the code directly! Intersection Intersection
Var Num = 0; Function Yezi () {ctx.save (); // The canvas transform status ctx.beginpath (); ctx.translate (400,300); // ctx.globalPha = 0.9; // Settings In the first state, the rotation of the coordinate system ctx.rotate ((math.pi/180)*num); var liner1 = ctx.createlineargient (30, -12, 30,12); // The style of color gradient filling is set here. Liner1.addcolorsstop (0,#ccc); Liner1.addcolorsstop (0.5,#FFF); liner1.addcolorsstop (1,#ccc); ctx.fillstyle = liner1; ctx.save (); // Save the first state transplanting for the first time Ctx.beginpath (); bind (); // Call the function // Draw the second leaf ctx.beginpath (); ctx.rotate ((math.pi/180)*120); // The coordinate system rotates 120 ° CTX.SAVE (); // Save the rotating coordinate system, pave the bind () for the third leaf; // Call the function // Draw the third leaf ctx.beginpath (); .Pi/180)*120); // The coordinate system rotates 120 ° Ctx.save (); bind (); // calls the function ctx.restore (); // Reply to the third state (rotating coordinate system) CTX .Restore (); // Reply Before the second state (rotating coordinate system) // Draw ctx.beginpath (); var arcgradient = ctx.createradialGaDient (0,0,0,0,0,0,16); ArcGradient.addcolorsstop (0,#ccc); ArcGradient.addcolorsstop (0.1,#FFF); ArcGradient.addcolorsstop (1,#ccc); ; CTX .fillStyle = ArcGradient; ctx.fill (); ctx.restore (); // Reply before the first state (translation coordinate system) num+= 5; // ******************************这个num使得环境1的旋转角度在不停的变化，****** *************************************************************************************************************************************************************************************************************, Each leaf is repeated code, here is a function packaging function bind () {ctx.moveto (0,0); ctx.quadraticCurveto (10, -12, 30, -12); // (190, -3); CTX.quadraticCurveto (200,0,190,3); ctx.lineto (30,12); ctx.moveto (0,0); ctx.quadraticCurveto (10,12,30,12); CTX .fill ();} 4. Set animationThis part of the animation is relatively simple. Set the timer, remove the canvas, and call the function; you can do it, finish the work! Intersection Intersection
SetInterval (function () {ctx.clearrect );}, 50);Source code: https://github.com/224137748/canvas/blob/master/windmill.html
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.