Written in 2016.01.25

Love the front end, learn the front end of the most original motivation, is because it can make very cool effect. However, the skills I use now are mostly in business logic, which is not what I originally wanted to do. So after work, I plan to pick up my interest and learn something really “cool”. Canvas is one of the tools that can help me achieve my goal. I hope that through this note, I can urge me to finish my study efficiently and share my understanding of learning.

Learning resources from MOOCs/gorgeous countdown effect Canvas drawing and animation foundation, thank @liuyubobobo teacher for sharing the course!

Create a label

Html5’s

tag defines a “canvas” on which all of our drawings are based. So on the page we declare a canvas tag with an ID and your browser version is so damn old why do you define width and height inside the tag, because

Width and height are canvas properties, not CSS3 properties. Using cSS3 to define width and height only limits the size of the canvas, not the resolution of the content. The advantage of defining these two attributes directly in the tag is that the canvas size and actual display problems can be solved together.

The text content in the middle of the tag is a suggestive statement that automatically appears when the browser does not support Canvas, and this sentence will be omitted when the browser supports Canvas.

After you have created the page label, start drawing on the actual canvas. It is completely controlled by JS, so everything we do about drawing is done in JS

Creating a drawing context

In js, we define var canvas = document.getelementById (‘canvas’); var cxt = canvas.getContext(‘2d’); First get the Canvas object, then execute its.getContext(‘2d’) method to create a drawing context CXT. All subsequent drawing on this canvas will be done by calling this different CXT method. With the environment set up, you’re ready for real action!

Drawing graphics

Tutorial said very clear, here will not continue to repeat, mainly summed up the role of different methods, the effect, and its attention.

// Place the nib on the canvas at 100, 100Copy the code
Cxt. moveTo(100, 100) // Draw from 100 to 700, Cxt. lineTo(500,100) cxt.lineTo(100,100) // set lineWidth cxt.lineWidth = 5 // set line style (color) Cxt.strokestyle = 'pink' // Set the fill color cxt.fillstyle = 'lightblue' cxt.fill() // tell canvas I'm done and execute the stroke() method cxt.stroke()Copy the code

The teacher repeatedly emphasized in the tutorial that canvas is a drawing based on “state”, that is, when I define moveTo(), lineTo() and other methods, WHAT I define is a state of “how I want to draw”, which is “before I write”. However, after I have thought about and defined this state, Before performing the “draw the idea” method, that is, executing.fill(),.stroke() and so on to tell the canvas “I’m going to draw!” “And then draw the content.

** Just because canvas is state-based, different states should have clear starting flags. ** If we want to draw a triangle and a straight line in different colors, we might write: // Place the pen tip on the canvas at 100, 100 // cxT.moveto (100, 100) // draw from 100, 100 to 700, Cxt. lineTo(500,100) cxt.lineTo(100,100) // set the triangle line color to pink (I like pink) cxt.strokeStyle = ‘pink’ // Tell Canvas I’m done and execute the stroke() method cxt.stroke()

Cxt. strokeStyle = 'lightblue' // Tell canvas I'm done, Execute the stroke() method cxt.stroke()Copy the code

See how it looks:

cxt.strokeStyle = 'lightblue' 

Cxt.beginpath () // Draw a new line cxt.moveto (50, Cxt. strokeStyle = 'lightblue' // Tell canvas I'm done, Execute the stroke() method cxt.stroke()Copy the code

Where beginPath() tells canvas I think I’ll start drawing a path here, and closePath() declares the end of the path. Both methods work when wrapping the.stroke() method, but for semantic purposes, path refers to a path, so we’ll use them only for wrapping the path. Look at the results:

To be continued…