What are the javascript canvas methods?

javascript canvas methods include: createLinearGradient(), createPattern(), rect(), fillRect(), fill(), stroke(), clip(), arc(), arcTo(), etc.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

The tag is used to draw images (via script, usually JavaScript).

However, the element itself has no drawing capabilities (it is just a container for graphics) - you must use a script to perform the actual drawing tasks.

The getContext() method returns an object that provides methods and properties for drawing on the canvas.

javascript canvas method

Color, style and shadow

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

Rectangle

##MethodDescriptionrect()Create a rectangle. fillRect()Draw a "filled" rectangle. strokeRect()Draw a rectangle (without fill). clearRect()Clears the specified pixels within the given rectangle.

Path

MethodDescriptionfill()Fill the current drawing (path). stroke()Draw the defined path. beginPath()Start a path, or reset the current path. moveTo()Move the path to the specified point in the canvas without creating a line. closePath()Create a path from the current point back to the starting point. lineTo()Adds a new point and creates a line in the canvas from that point to the last specified point. clip()Clip an area of ​​any shape and size from the original canvas. quadraticCurveTo()Create a quadratic Bezier curve. bezierCurveTo()Create a cubic Bezier curve. arc()Creates an arc/curve (used to create a circle or partial circle). arcTo()Create an arc/curve between two tangent lines. isPointInPath()Returns true if the specified point is in the current path, false otherwise.

Conversion

##Methodscale()rotate()translate()transform()setTransform()

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

Text

##MethodDescriptionfillText()Draw "filled" text on the canvas. strokeText()Draw text (without padding) on ​​the canvas. measureText()Returns an object containing the specified text width. Image drawing

##MethodDescriptionDraw an image, canvas or video to the canvas.

drawImage()

Pixel operations

##MethodDescription##createImageData()getImageData()putImageData()

Create a new, blank ImageData object.
Returns an ImageData object that copies pixel data for the specified rectangle on the canvas.
Puts image data (from the specified ImageData object) back onto the canvas.

Other

##MethodDescriptionsave()Save the state of the current environment. restore()Returns the previously saved path status and attributes. createEvent()[Recommended learning: javascript advanced tutorial]

	##getContext()
	toDataURL()

The above is the detailed content of What are the javascript canvas methods?. For more information, please follow other related articles on the PHP Chinese website!