1- Canvas base drawing

  • Canvas is also an HTML tag, so use it directly. Style sets the color of the canvas
  • The default width and height of canvas is 300.150; If you want to customize it, you can do it in the DOM or via JS, not CSS
  • Gets the Canvas canvas
  • Get the brush (Canvas Context object)
  • Set the brush color
  • Set the drawing shape

(Note: Canvas is compatible with IE9, the maximum canvas should not exceed 4000, because the range of different browsers is different, 4000 is acceptable in general)

The overall code is as follows:

The effect is as follows:

2 – drawing canvas

  • Canvas is a two-dimensional rectangular coordinate system, XY axis;
  • The horizontal axis is X, and the vertical axis is Y. The point (0,0) is in the upper left corner of the canvas. X gets bigger as you go to the right, and Y gets bigger as you go down (this point is similar to the pixel in the front page).
  • The base of canvas is the width and height of pixels, X axis 2 pixels, Y axis 2 pixels, corresponding to the width and height of 2 pixels 4 grid, 1 pixel is a rGBA grid (width and height 1 respectively)

2-1. Drawing method of Canvas rectangle:

The effect of clearing rectangle is as follows:

2-2. Canvas path drawing method

  • Begin to create a path: beginPath(), which also has the function of clearing the path set
  • Add subpath to path set (subpath shape includes: straight line, arc, tangent arc, quadratic Bezier curve, cubic Bezier curve, rectangle):

[Starting point; shape; closePath() optional, moveTo(x,y); shape; closePath() optional, moveTo(x,y); shape; closePath() optional,]

  • Display paths: Fill (), stroke()

2-2-1, straight line shape

  • Single line shape + no closePath+ Stroke:

  • Single line shape +closePath+ Stroke:

Single line shape + fill (clothPath or no clothPath) :

  • Multiple line shapes and strokes affect whether or not each of them has a moveTo or closePath:

  • Multiple line shapes + fill, each has moveTo and closePath.

2-2-2, circular shape

A single arc, with no moveTo, starts where the default arc is 0

As you can see, the default starting point is (600,400) :

Multiple arcs, with or without moveTo, can affect:

2-2-3, tangent arc

Draw two straight auxiliary lines, you can see the tangent arc effect:Remove the auxiliary line and just look at the tangent arc:

Quadratic Bezier curves

Draw two straight auxiliary lines to see the effect of a quadratic Bezier curve:Remove the auxiliary line and just look at the quadratic Bezier curve effect:

2-2-5. Bell curve for three times

Draw three straight guides to see three Bezier curves:Remove the auxiliary line and see the Bessel curve effect only three times:

The 2-2-6, rectangle

Conclusion:

A path is a collection of subpaths. A context object has only one path at a time. To draw a new path, empty the current path. The beginPath() method empties the current path, that is, restores the path to its default state so that the path drawn later is not affected by the previous path

2. A subpath is a continuous line with only one starting point. MoveTo (x,y) is a way to set the starting point of a path and create a new subpath. The first sliver of a path does not need a starting point. Its starting point defaults to a point in the child path

2-2-6. Robots – Case studies

2-2-7. Water Drop – The case

3- Canvas graphic style

3-1, the area of the graph coloring

  • Stroke area: strokeStyle represents the stroke style. Stroke area is drawn by stroke(), strokeRect() or strokeText().
  • Fill area: fillStyle represents the fill style, and the fill area can be drawn by fill(), fillRect(), or fillText().

3-2 graphic coloring methods: solid color, gradient, texture

  • Pure color

  • Linear gradient

  • Radial gradient

  • texture

3-3 Factors affecting stroke style

  • StrokeStyle: Stroke color, refer to the 3-2 coloring method
  • LineWidth: The width of the stroke, drawn from the center of the path, half the width inside and half the width outside.

  • LineCap: Stroke endpoint style

  • LineJoin: Corner style, miter by default

  • MiterLimit: indicates the limit of inflection point. When lineJoin is miter, if the corner is too small, the thickness of the corner will be too large

  • SetLineDash: the dotted line

  • LineDashOffset: dashed line offset

3-4 Neon examples

In fact, because the timer interchanges colors, it has the effect of a neon light, and the image is a certain frame effect:

3-5 Example of projection

  • Unlike stroke, drop shadow does not have the default color and needs to be added manually
  • Projection is different from stroke, you don’t have to draw it yourself, it comes out with everything else

3-6 Neon halo

It actually flashes red and yellow