This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

Title/ Canvas complete guide # flight.archives006

Come on! Learn XDM on the Web front end! (take off!!!

This is a detailed Chinese Canvas tutorial, covering all the methods of Canvas!

The Tag/Canvas is introduced

<canvas id="myCanvas"></canvas>
Copy the code

< Canvas > is one of the HTML elements that requires JavaScript to draw

canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d'); // To draw 3d images, use Canvas.getContext ('webgl'), which is not covered in this chapter
Copy the code

The getContext(‘2d’) method returns a CanvasRenderingContext2D object that we can use to draw!

The Tag/context method

Draw a rectangle

  1. ClearRect (x, y, width, height) turns the pixels within the rectangle to transparent

    X: the x-coordinate of the rectangle y: the y-coordinate of the rectangle Width: the width of the rectangle Height: the height of the rectangle

  2. FillRect (x, y, width, height) fills the pixels within the rectangle. The filling mode is determined by the fillStyle attribute

    X: the x-coordinate of the rectangle y: the y-coordinate of the rectangle Width: the width of the rectangle Height: the height of the rectangle

  3. StrokeRect (x, y, width, height) strokes the specified rectangle. The stroke mode is determined by the strokeStyle attribute

    X: the x-coordinate of the rectangle y: the y-coordinate of the rectangle Width: the width of the rectangle Height: the height of the rectangle

Draw text

  1. FillText (TEXT, x, y, [maxWidth]) Fills text. The filling mode is determined by fillStyle, and the style is determined by font, textAlign, textBaseline, and Direction

    X: the horizontal coordinate of the text. Y: the vertical coordinate of the text. MaxWidth (optional): Scale the font horizontally if the length is exceeded

  2. StrokeText (text, x, y [maxWidth]) Specifies the strokeStyle. The strokeStyle is determined by the font, textAlign, textBaseline, and direction attributes

    X: specifies the horizontal coordinate of the text. Y: specifies the vertical coordinate of the text. MaxWidth (optional): Scales the font horizontally if it exceeds its length

  3. MeasureText (Text) Measures text, returning a TextMetrics object

    Text: The text to be measured

Create a path

To be updated

Draw the path

The plot

Image transformation

controls

Create gradients and patterns

Drawing state switch

Get current style

The Tag/context properties

Linear style

Fill and stroke styles

The text style

Shadow style

Synthetic way

Image smoothing

->> Details

–

->> See also

The clock Demo c.runoob.com/iframe/5613

->> Reference link

MDN Chinese document developer.mozilla.org/zh-CN/docs/…

MDN English document developer.mozilla.org/en-US/docs/…

CSS-Tricks css-tricks.com/tag/canvas/

Liao Xuefeng www.liaoxuefeng.com/wiki/102291…

->> Version History

Now release for V1.0 see lot (@ flightmakers/flight. Archives)

2021.8.16 release V1.0