canvas

1. Definition (high school required)

In fact, it can be considered as a canvas, compared to Flash can interact with JS, self-realization of the cool effect you want, and magnification does not lose frames like image pixels.

Base properties (easy to refer to)

Base API (easy access)

2. Draw

Cognitive:

1. The stylus here refers to the border, which is actually drawn with a lineWidth equal to half outward and half inward (for example lineWidth = 15, the border is actually only 7.5, similar to margin7.5,padding7.5), Therefore, whether w=100 or H =100 in canvas refers to the middle from the starting point to the border line, which is similar to the middle of margin and padding.

2. If the API of stroke drawing line and fill area is written in different order, it will be overwritten, with the latter covering the front.

3. Except ctx.fiilrect (x,y,w,h), everything related to drawing lines needs to add ctx.stroke().

Steps:

1. Add canvas tag to customize width and height properties

2. Get the Canvas element and then the artboard

Draw graphics, lines, etc. (note: with canvas width and height, the canvas content scales in proportion to the canvas width and height)

3.api

Draw the area

ctx.fiilRect(x,y,w,h)      // Draw the black fill area

ctx.react(x,y,w,h)    ctx.stroke()   // Draw a hollow rectangle

ctx.clearRect(x,y,w,h)   // Clear the populated area

ctx.fillStyle = "Color"   // Fill the colorCTX. Our lineWidth = number// The width across the stylus is used with react and stroke

ctx.strokeStyle = "Color"  // Color of the pen
Copy the code

Draw lines

ctx.moveTo(x1,y1) // Start somewhere (using moveTo initially)
ctx.lineTo(x2,y2) // Connect the line to the next point (can be used multiple times, used to connect the line)

// Draw a five-pointed star

ctx.moveTo(100.200)
ctx.lineTo(200.0)
ctx.lineTo(300.200)
ctx.lineTo(100.80)
ctx.lineTo(300.80)
ctx.lineTo(100.200)
ctx.stroke()

// Bug: Draw pentagram plus ctx.lineWidth = 10 start and end points do not close
// Solution: Add beginPath() and ctx.closepath () to wrap the path
ctx.lineWidth = 10
ctx.beginPath()
ctx.moveTo(100.200)
ctx.lineTo(200.0)
ctx.lineTo(300.200)
ctx.lineTo(100.80)
ctx.lineTo(300.80)
ctx.lineTo(100.200)
ctx.closePath()
ctx.stroke()

Copy the code

Draw the endpoint

ctx.lineCap = "miter"  / / the default miter
ctx.lineCap = "round" / / the rounded
ctx.lineCap = "bevel" / / bevel
ctx.lineWidth = "10" // Only half of the actual border is visible, as are the rounded corners


Copy the code

Draw circles, rotate, shift, scale

Cognition: Rotation starts in the positive X-axis direction, not the positive Y-axis direction

Formula: 1 radian = 1*(math.pi /180)

Cooperate: Scale should be used in independent paths (equivalent to local scopes)

ctx.translate(x,y) // as the starting point for all draws, when you don't want 0,0 as the starting point for all draws
/ / draw circleArc (x,y,r, starting radian, ending radian, clockwise or not) ctx.stroke() ctx.rotate()// rotate a radian with the upper left corner (0,0) as the base point instead of the current graphCtx. scale(width scaling multiple, height scaling multiple)// Scale with ctx.save() ctx.restore() to avoid global scaling
Copy the code