HomeProgramHTMLReference Canvas in HTML

Reference Canvas in HTML

Colors, styles and shadows

Properties Describe
fillStyle Set/return the color, gradient or pattern used to fill the drawing
strokeStyle Set/return the color, gradient or pattern used for the strokes
shadowColor Set/return the color to use for the drop shadow
shadowBlur Set/return opacity level for shadow
shadowOffsetX Set/return horizontal distance of shadow from shape
shadowOffsetY Set/return the vertical distance of the shadow from the shape

 

Method Describe
createLinearGradient() Create a linear gradient (for use on canvas content)
createPattern() Iterate over a specified element in the specified direction
createRadialGradient() Create a radial/circular gradient (for use on canvas content)
addColorStop() Specify color and stop position in a gradient object

Line style

Properties Describe
lineCap Set/return the style of the bullets for a line
lineJoin Set/return the type of angle generated, when two lines meet
lineWidth Set/return current line width
miterLimit Set/return the maximum miter length
Method Describe
rect() Create a rectangle
fillRect() Draw a rectangle "with fill"
strokeRect() Draw a rectangle (no fill)
clearRect() Remove specified pixels within a given rectangle

Calibration curve

Method Describe
fill() Fill in the current drawing (standard line)
stroke() Draw the standard curve you have determined in practice
beginPath() Start a calibration curve or reset the current calibration curve
moveTo() Move the reference line to the specified point in the canvas without creating the line
closePath() Create a reference line from the current point back to the starting point
lineTo() Add a new point and create a line to it from the last specified point in the canvas
clip() Crop an area of ​​any shape and size from the original canvas
quadraticCurveTo() Creating quadratic Bézier curves
bezierCurveTo() Creating a cubic Bézier curve
arc() Create an arc/curve (used to create circles or sections of circles)
arcTo() Create an arc/curve between two tangents
isPointInPath() Returns true if the specified point is within the current calibration curve, false otherwise

Change

Method Describe
scale() Scale the current drawing larger or smaller
rotate() Rotate current drawing
translate() Fix position (0,0) on canvas
transform() Substitute the current transformation matrix for the drawing
setTransform() Reset transforms the current into an identity matrix. Then run transform()

Document

Properties Describe
font Set/return current font properties for body text
textAlign Set/return current alignment of body text
textBaseline Set/return the current text baseline used when drawing text
Method Describe
fillText() Draw the word "with color" on the canvas
strokeText() Draw text on canvas (no fill color)
measureText() Returns an object containing the specified text width

Draw pictures

Method Describe
drawImage() Draw an image, canvas or video onto the canvas

Pixel manipulation

Properties Describe
width Returns the width of the ImageData . object
Cao Returns the height of the ImageData . object
data Returns an object containing the image data of the specified ImageData object
Method Describe
createImageData() Create a new, empty ImageData object
getImageData() Returns an ImageData object that copies the pixel data for the specified rectangle on the canvas
putImageData() Set image data (from a specified ImageData object) back to canvas

Compositing

Properties Describe
globalAlpha Set/return the current alpha or transparency value of the drawing
globalCompositeOperation Set/return how a new image is drawn over an existing image

Other

Method Describe
save() Save the state of the current context
restore() Returns the state and properties of the previously saved calibration curve
createEvent()  
getContext()  
toDataURL()  
3.5 ★ | 2 Vote
CanvasCanvas in html

You should read it

May be interested

HTML