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

This article focuses on "analyzing JavaScript HTML DOM Canvas objects". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "analyzing JavaScript HTML DOM Canvas objects".

Canvas object

The Canvas object represents the HTML5 element.

You can use getElementById () to access the element:

Var x = document.getElementById ("myCanvas")

Note: the element does not have its own drawing function (it is just a container for graphics)-you must use scripts to actually draw graphics. The getContext () method returns an object that provides methods and properties to paint on the canvas. This reference describes the properties and methods of the getContext ("2d") object, which can be used to draw text, lines, boxes, circles, etc., on the canvas.

Color styles and shadow

The following table shows the properties related to canvas color styles and shadows:

Property describes the fillStyle setting or returns the color, gradient, or pattern strokeStyle setting used to fill the drawing or returns the color, gradient or pattern shadowColor setting for strokes or returns the color for shadows shadowBlur settings or returns the blur level of shadows shadowOffsetX settings or returns the horizontal distance between shadows and shapes shadowOffsetY settings or returns the vertical distance between shadows and shapes

The following table shows the canvas color styles and shadow-related methods:

Method description createLinearGradient () creates a linear gradient (for canvas content) createPattern () repeats the specified element createRadialGradient () in the specified direction to create a radial / circular gradient (for canvas content) addColorStop ()

Line styl

The following table shows the line-related properties:

Property describes the lineCap setting or returns the style of uppercase letters at the end of a row, lineJoin sets or returns the type of corner created, when two lines intersect, lineWidth sets or returns the current row width miterLimit setting or returns the maximum miter length rectangle

The following table shows the rectangle-related methods:

Method description rect () creates a rectangle fillRect () draws a "fill" rectangle strokeRect () draws a rectangle (no fill) clearRect () clears the specified pixel canvas path within a given rectangle

The following table shows the canvas path-related methods:

Method description fill () fills the current drawing (path) stroke () draws the path you define beginPath () starts a path, or resets the current path moveTo () to move the path to a specified point in the canvas Instead of creating a line closePath () creates a path from the current point to the starting point lineTo () adds a new point from the last point specified in the canvas and creates a line at that point clip () clips an area of any shape and size on the original canvas quadraticCurveTo () creates a quadratic Bezier curve bezierCurveTo () creates a cubic Bezier curve arc () creates an arc / curve (used to create a circle or circle Partial) arcTo () creates an arc / curve between two tangents isPointInPath () if the specified point is in the current path True is returned, otherwise it is converted to false canvas

The following table shows the conversion-related methods:

The method describes scale () to scale the current drawing or large or small rotate () to rotate the current drawing translate () on the canvas to redraw transform () from the position of (0Power0) to replace the transformation matrix setTransform () of the current drawing to reset the current transformation to the unit matrix. Then run transform () canvas text

The following table shows the properties related to the canvas text:

Property describes the font setting or returns the current font properties of the text content textAlign sets or returns the current alignment of the text content textBaseline sets or returns the current text baseline used when drawing the text

The following table shows the canvas text-related methods:

Method description fillText () draws "fill" text on the canvas strokeText () draws text on the canvas (no fill) measureText () returns an object image that contains the specified text width

The following table shows the methods related to canvas image rendering:

Method describes the operation of drawImage () to draw an image, canvas, or video pixel on a canvas

The following table shows the properties related to canvas pixel operations:

Property description width returns the width of the ImageData object height returns the height of the ImageData object data returns the object containing the image data of the specified ImageData object

The following table shows the methods related to canvas pixel manipulation:

The property method createImageData () creates a new blank ImageData object getImageData () that returns an ImageData object that copies the pixel data of the specified rectangle on the canvas putImageData () and puts the image data (from the specified ImageData object) back into the canvas for synthesis.

The following table shows the properties related to canvas composition:

Property describes the globalAlpha setting or returns the current alpha or transparency value of the drawing globalCompositeOperation setting or returns how to draw a new image onto an existing image

HTML reference: HTML5 canvas

HTML reference: HTML ta

At this point, I believe you have a deeper understanding of "analyzing JavaScript HTML DOM Canvas objects". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.