Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use canvas method in html5". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to use canvas method in html5" can help you solve the problem.

HTML5 canvas method used

HTML5 canvas isPointInPath is a very important function, its role is to determine whether a certain point is within a certain path. The syntax is as follows:

html5 canvas method guide,

The canvas method

save () saves the state of the current environment

restore () Returns the previously saved path state and attributes

createEvent（）

getContext () returns an object indicating the API necessary to access drawing functionality

toDataUPL () returns the URL of the canvas image

Properties and methods for line styles

Attribute:

lineCap Sets or returns the end endpoint style of a line

lineJoin Sets or returns the type of corner created when two lines intersect

lineWidth Sets or returns the width of the current line.

miterLimit sets or returns the maximum miter length

Color, Style and Shadow Properties and Methods

attribute

fillStyle Sets or returns the color, gradient, or mode used to fill the painting

strokeStyle Sets or returns the color, gradient or mode used for strokes

shadowColor sets or returns the color used for shadows

shadowBlur sets or returns the blur level used for shadows

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

createLinearGradient () Creates a linear gradient (used on canvas content)

createPattern () repeats the specified element in the specified direction

createRadialGradient () creates radial/circular gradients (used on canvas content)

addColorStop () specifies the color or stop position in the gradient object

path method

fill () fills the current drawing (path)

stroke () draws a defined path

initiPath () starts a path, or resets the current path

moveTo () moves the path to a specified point on the canvas without creating a line

closePath () creates a path from the current point back to the starting point

lineTo () adds a new point, creating a line from that point to the last specified point

clip () cuts an area of arbitrary shape and size from the original canvas

quadraticCurveTo () Create a second Bezier curve

bezierCureTo () Create the last square Bezier curve

arc () Create arcs/curves (for creating circles or partial circles)

arcTo () creates an arc/curve between two tangents

isPointInPath () Returns a Boolean value if the specified point is in the current path

rectangular

Rect () creates a rectangle

fillRect () draws a 'filled' rectangle

strokeRect () Draws a rectangle (no fill)

clearRect () Clears specified pixels within a given rectangle

Set text properties and methods

Attribute:

font Sets or returns current font properties for text content

textAlign Sets or returns the current alignment of text content

The textBaseline setting returns the current text baseline used when drawing text.

Methods:

fillText () draws "filled" text on the canvas

strokeText () Draws text on canvas (no fill)

measureText () returns an object containing the specified text width

conversion method

scale () Zooms the current drawing to a larger or smaller size

rotate () Rotate the current drawing

translate () remaps the (0,0) position of the shirt

transform () replaces the drawing's current transformation matrix

setTransform () resets the current transform to the identity matrix. Then run transform ()

About "how to use canvas method in html5" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.