HomeProgramHTML

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

  • eQuiz - Multiple choice test on HTML knowledgeeQuiz - Multiple choice test on HTML knowledge
    in this test, we will proceed with the small html test, there will be 30 questions in total with no response time, you must choose the answer in each question. can continue to the next sentence.
  • Paths in HTMLPaths in HTML
    you can find links (links) throughout the web. link allows clicking to switch to another page.
  • Reference in C ++Reference in C ++
    a reference variable is an alias, which is another name for an existing variable. when a reference is initialized with a variable, then either the variable name or the reference name can be used to reference that variable.
  • Why write neat and organized HTML?Why write neat and organized HTML?
    you will get many benefits from writing clean and precise html code. here's why it's a good idea to write optimal html code.
  • Firefox offers the same security features as the Tor browserFirefox offers the same security features as the Tor browser
    mozilla engineers have borrowed a feature from the tor browser and will upload it to firefox 58, without saving the user's footprint with html5 canvas.
  • HTML formHTML form
    the form in html contains form elements - the element types that take input data such as filling in text fields, checkboxes, buttons, submit buttons ...
  • Style properties in HTMLStyle properties in HTML
    the style attribute specifies the style for the html element.
  • Text in HTMLText in HTML
    the element in html is used to define a paragraph of text.
  • How to Use Text Color Tags in HTMLHow to Use Text Color Tags in HTML
    this article explains how to change the font color in html documents. although the html style tag is obsolete in html5, you can use css to color content on an html page. if you use an older version of html, you can use the html text color tag as needed.
  • Format text in HTMLFormat text in HTML
    format elements in html help determine the style and importance of text.

HTML