Canvas exercise and Study Notes (1), canvas Study Notes

Canvas exercise and Study Notes (1), canvas Study Notes

June

I learned a lot about Canvas on MOOC.

Demo of the previous exercise

I am using Chorme

Compatibility issues are not considered for the moment

Clock https://fanyear.github.io/Canvas/Clock/index.html

(Magnifier) left mouse https://fanyear.github.io/Canvas/Magnifier/index.html

Zoom image https://fanyear.github.io/Canvas/ScaleImage/index.html

Star animation flashing https://fanyear.github.io/Canvas/StarTwinkling/index.html

Cool timing animation effect https://fanyear.github.io/Canvas/Timer/index.html

 

What is the recommended MOOC tutorial http://www.imooc.com/u/108955/courses? Sort = publish (A series of tutorials are well organized)

Http://www.imooc.com/learn/338 (Star flashing tutorial)

 

The following are my study notes, which are not tutorials but not comprehensive. They are some important notes. They are more important for you to come back when you forget them, I hope you can give me some advice if you have made any mistakes:

 

1. HTML Section

The following is the HTML part. When the browser does not support canvas, the second line (text part) is displayed. You can add the width and height attributes to the canvas label to set the width and height of the canvas. However, we recommend that you set them in js.

　　

1 <canvas id = "canvas"> 2 Your browser doesn't support Canvas // 3 is displayed when the browser does not support Canvas. </canvas>

 

 

2. JavaScript part

2.1 obtain the drawing environment

You can set global variables at the beginning, and the canvas width and height are easy to modify. Then, use the getElementById method to find the canvas in html. Then, use the getContext () method to return an environment for drawing on the canvas (the input parameter is 2d, which is specified as 2d drawing ).

1 var CANVASWIDHT = 800;2 var CANVASHEIGHT = 600;3 4 var canvas = document.getElementById("canvas");5 var context = canvas.getContext("2d");

 

2.2 basic operations

Ontext. moveTo (x, y) is like painting the pen on the x and y coordinates of the canvas.

Context. lineTo (x, y) creates a line from the last point to (x, y.

NOTE: If lineTo () is used, this lineto () serves as moveTo () before it is reached.

Context. lineWidth: set the path line width.

Context. strokeStyle

Context. fillStyle

Canvas programming is based on the State. The above mentioned is to set the drawing state, and is finally drawn by context. stoke () and context. fill.

Stroke () is the drawing path

Fill () is the filling path (closePath () will be called by default ))

Context. moveTo (100,100) // start point context. lineTo (200,200) // you can directly use it without moveTo context. lineWidth = 6 context. strokeStyle = "red" context. fillStyle = "blue"

Context. fill () // draw context. stroke ()

/* Multiple Color Representation Methods # bbb #123456 rgb (0.6, 3) rgba (28%, 3, 20%) hsl (0.5,) hsla) */

2.2 line attributes

　　Set the lineCap attribute or return the style of the end line cap.

Butt (default) adds straight edges to each end of a line.
Round adds a circle cap to each end of the line.
Aquare adds a Square Line cap to each end of the line.

The lineJoin attribute sets or returns the type of the created corner when two lines converge.

Miter (default) creates a tip
Bevel create Angle
Round
 　　
MiterLimit has a default value that can be modified.

W3C explains this as follows:

Tip: The miterLimit is valid only when the lineJoin attribute is "miter.

The smaller the angle of the corner, the larger the diagonal length.

We can use the miterLimit attribute to avoid the length of the diagonal link.

If the diagonal link length exceeds the value of miterLimit, the corner is displayed in the "bevel" type of lineJoin.

 

　2.3 When You Need To draw multiple paths, you need to use beginPath () closePath ()

BeginPath () begins to draw a new path.

ClosePath () ends. If the path is not closed, the path is automatically closed.

 

　2.4 draw a rectangle

Context. rect (x, y, width, height) // path

Context. fillRect (x, y, width, height) // draw directly

Context. strokeRect (x, y, width, height) // draw directly

　　

 

context.moveTo(100,200)context.lineTo(300,200)context.strokeStyle = "red"context.stroke()      context.moveTo(400,500)context.lineTo(500,500)context.strokeStyle = "blue"context.stroke()

// The result is blue because the second context. stroke () overwrites the first context. stroke () and adds context. beginPath () between the two sections of code ()

2.5 graphic Transformation

The displacement effect of translate (x, y) is superimposed (so the save () restore () rotate (deg) rotation scale (x, y) is used to change other attributes.

Save () save the current status
Restore () Fetch save status

Here, save (); and restore (); match each other to save the canvas state and retrieve the Saved state. Here we will explain a little:

When we rotate, zoom, and pan the canvas, we actually want to operate on specific elements, such as slices and rectangles, but when you use the canvas method to perform these operations, the entire canvas is actually operated, and then the elements on the canvas will be affected, therefore, we call canvas before the operation. save () to save the current status of the canvas. After the operation, the previously saved status is taken out, so that other elements are not affected.

There is also a transformation matrix:

Transform ()-level connection

SetTransform () is not connected in a hierarchical manner. It changes the previous status to the default status and then sets the status.

 

2.6 fill Style

2.6.1 gradient

　　　　

　　　　Step 3

Context. fillStyle = grd;

Note: Remember to add the path

　　

2.6.2 Mode