Detailed explanation of HTML5 canvas (2)

The previous article gave a brief introduction and usage examples of the canvas tag, but in fact the usage of canvas is very powerful. Many cool HTML5 animations and games are made based on canvas. . Therefore, I decided to continue writing two canvas-related blog posts to consolidate the foundation of canvas.
This article mainly introduces the related properties and usage of canvas.

Color, Style and Shading

Properties	Description
fillStyle	Sets or returns the color, gradient, or pattern used for fill painting
strokeStyle	Sets or returns the color, gradient, or pattern used for strokes Gradient or pattern
shadowColor	Set or return the color used for shadow
shadowBlur	Set Or returns the blur level used for the shadow
shadowOffsetX	Sets or returns the horizontal distance of the shadow from the shape
shadowOffsetY	Sets or returns the vertical distance of the shadow from the shape

Method	Description
createLinearGradient()	Create a linear gradient (used on canvas content)
createPattern()	Repeat the specified element in the specified direction
createRadialGradient()	Create a radial/circular gradient (used on canvas content)
addColorStop()	Specify the color and stop position in the gradient object

Line style

Properties	Description
lineCap	Set or return the end endpoint style of the line
lineJoin	Set or return the corner type created when two lines intersect
lineWidth	Set or return the current line width
miterLimit	Set or return the maximum miter length

Rectangle

##rect()Create a rectanglefillRect()Draw a "filled" rectanglestrokeRect()Draw a rectangle (no fill)clearRect()Clear the specified pixels within the given rectangle

Method	Description

Path

MethodDescriptionfill()Fill the current drawing (path)stroke()Draw the defined pathbeginPath ()Start a path, or reset the current pathmoveTo()Move the path to the specified point in the canvas, no Create a lineclosePath()Create a path from the current point back to the starting pointlineTo()Add a new point and create a line in the canvas from that point to the last specified pointclip()Clip any from the original canvas Areas of shape and sizequadraticCurveTo()Creating quadratic Bezier curvesbezierCurveTo()Create cubic Bezier curve##arc()arcTo()isPointInPath()Conversion

Create arc/curve (used to create a circle or partial circle)
Create an arc/curve between two tangents
If specified Returns true if the point is in the current path, otherwise returns false

Methodscale() rotate()translate()transform()setTransform()Text

Description
Scale the current drawing to a larger or smaller size
Rotate the current drawing
Remap the (0,0) position on the canvas
Replace the current transformation matrix of the drawing
Reset the current transformation to the identity matrix . Then run transform()

##PropertiesDescriptionfontSet or return the current font attribute of the text content textAlignSet or return The current alignment of text contenttextBaselineSets or returns the current text baseline used when drawing text##fillText()On canvas Draw "filled" textstrokeText()Draw text on canvas (without fill)##measureText ()Image drawing

Method	Description
Returns an object containing the specified text width

Method##drawImage()Draw an image, canvas, or video to the canvasPixel operations

Description

PropertiesDescriptionwidth Returns the width of the ImageData objectheightReturns the height of the ImageData objectdataReturns an object containing the image data for the specified ImageData object MethodDescriptioncreateImageData()Create a new, blank ImageData objectgetImageData() Returns the ImageData object, which copies the pixel data for the specified rectangle on the canvas putImageData()Puts the image data (from the specified ImageData object ) placed back on the canvas Image combination

PropertiesDescriptionglobalAlphaSets or returns the current alpha or transparency value of the drawing globalCompositeOperationSettings Or return how to draw a new image onto an existing imageOther methods

MethodsDescriptionsave()Save the state of the current environmentrestore()Return the previously saved path status and attributescreateEvent() getContext()Get the object used for drawing on the canvastoDataURL()Export the image drawn on the canvas elementThe next section will use examples to illustrate the specific usage of each attribute and method.

The above is the detailed content of Detailed explanation of HTML5 canvas (2). For more information, please follow other related articles on the PHP Chinese website!