Canvas plotting-1, html5canvas-1

Canvas plotting-1, html5canvas-1

 

-----> Canvas Basics

1. Draw a line from 1 to 1. The line consists of a graph and beginPath.

Case: Draw a pattern composed of lines of different colors

1-2, polygon filling and closePath

Case: Draw a closed pattern with fill color

1. Draw a closed Pattern

2. Fill Pattern

Context. fillStyle = "yellow"; // define the fill color context. fill (); // perform the fill operation

Note: The results of first filling and first drawing are different.

1-3, draw a rectangle

Context. rect (x, y, width, heigth); // defines the rectangular context. fillRect (x, y, width, height); // defines the rectangle and fills (without Borders) the context. strokeRect (x, y, width, height); // defines the rectangle and draws it (without filling)

2. Line attribute 2-1. Line HAT: lineCap

// Javascript syntax context. lineCap = "butt | round | square ";

2-2, line connection: lineJoin and miterLimit

// Explain cirpt syntax context. lineJoin = "bevel | round | miter ";

 

Maximum length of the miterLimit.

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.

 

I know two versions of the definition of the diagonal link length.

W3School: http://www.w3school.com.cn/tags/canvas_miterlimit.asp

The oblique length refers to the distance between the inner and outer corners of the interchange of two wires.

MOOC network liuyubobobo: http://www.imooc.com/video/3492

In this case, let's give an example.

Var canvas = document. getElementById ("canvas"); var context = canvas. getContext ("2d"); window. onload = function () {canvas. width = 800; canvas. height = 800; context. lineWidth = 20; context. VPC: moveTo (100,100); context. lineTo (500,120); context. lineTo (100,140); context. miterLimit = 21; context. stroke (); context. beginPath (); context. VPC: moveTo (100,200); context. lineTo (500,220); context. lineTo (100,240); context. miterLimit = 10; context. stroke (); // Auxiliary Line context. beginPath (); context. VPC: moveTo (100,100); context. lineTo (500,120); context. lineTo (100,140); context. lineWidth = 1; context. strokeStyle = "# fff"; context. stroke ();};View Code

The above code can get the following two results:

It can be proved that the two definitions of the diagonal link length are incorrect.

So I got such a conjecture (visual testing is quite consistent)

Use a special 90-degree angle to verify if it is correct

If my guess is correct, set miterLimit to> = 15 to make the corner look like a sharp corner.

The actual result is:

When miterLimit = 1, the corner is displayed as bevel;

When the miterLimit is 2, the corner is displayed in the miter type;

Therefore, if the oblique length value of the image is within the range (1, 2], then my guess value is 10*2 ^ (1/2 ).

It's hard to figure out the length of this diagonal link, and it's coming to an end.

3. Graph transform 3-1, translate (x, y): remap the (0, 0) Position on the canvas

3-2, rotate (angle): rotate the current drawing

Angle:

Rotation Angle, in radians.

To convert degrees to radians, use the degrees * Math. PI/180 formula for calculation.

For example, if you want to rotate for 5 degrees, you can specify the following formula: 5 * Math. PI/180.

3-3, scale (): scale the current drawing to a greater or smaller size

Context. scale (scaleWidth, scaleHeight );

ScaleWidth, scaleHeight: scale the width/height of the current drawing (1 = 100%, 0.5 = 50%, 2 = 200%, and so on)

Note: If you scale the drawing, all subsequent drawings will also be scaled. The positioning is also scaled.

3-4, transform (): replaces the current conversion matrix of the drawing.

Graph matrix transformation: http://www.cnblogs.com/TianFang/p/3920734.html

// Javascript syntax context. transform (a, B, c, d, e, f );

Each object on the canvas has a current transformation matrix.

That is, when the conversion matrix is a matrix of units, the graph is not transformed: context. transform );

Note: This transformation will affect the drawing after the transform () method is called.

You can use setTransform () to reset the transform matrix or transform the matrix ()

The setTransform () method resets the current transformation matrix to the unit matrix, and then runs transform () with the same parameters ();