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

This article mainly explains "how to use HTML5 Canvas API to draw graphics", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use HTML5 Canvas API to draw graphics" bar!

1. Canvas element

The following html code defines a canvas element.

XML/HTML Code copies content to the clipboard

Getting started with Canvas

Access the canvas element through the following Javascript statement:

JavaScript Code copies content to the clipboard

/ / DOM writing method

_ window.onload = function () {

Var canvas = document.getElementById ("mainCanvas")

Var context = canvas.getContext ("2d")

}

/ / jQuery writing method

$(document) .ready (function () {

Var canvas = $("# mainCanvas")

Var context = canvas.get (0). GetContext ("2d")

});

/ / then you can call the method of context to call the drawing API

two。 Basic API

2.1 coordinate system

The Canvas 2D rendering context uses a planar Cartesian coordinate system, with the origin in the upper left corner (0Pol 0). One unit of the coordinate system is equivalent to one pixel of the screen. The details are as follows:

2016617120045425.jpg (220 × 220)

2.2 drawing basic graphics

2.2.1 rectangle

JavaScript Code copies content to the clipboard

/ / draw a filled rectangle

Context.fillRect (x, y, width, height)

/ / draw a border rectangle

Context.strokeRect (x, y, width, height)

/ / clear a rectangular area

Context.clearRect (x, y, width, height)

2.2.2 Lines

There are some differences between drawing lines and drawing graphics. Lines are actually called paths. To draw a simple path, you must first call the beginPath method, then call moveTo to set the starting point coordinates of the path, then call lineTo to set the line segment end coordinates (which can be set multiple times), and then call closePath to complete the path drawing. Finally, call stroke to draw the outline (or call fill to fill the path). The following is an example:

JavaScript Code copies content to the clipboard

/ / example

Context.beginPath (); / / start path

Context.moveTo (40Jet 40); / / move to a point (40Pol 40)

Context.lineTo (300,40); / / draw lines to points (300,30)

Context.lineTo (40,300); / / draw line to point (40300)

Context.closePath (); / / end path

Context.stroke (); / / draw the outline

/ / or fill with context.fill ()

2.2.3 Circle

Canvas does not actually have a special way to draw circles, but can simulate circles by drawing arcs. Because the arc is a path, the API for drawing the arc should be included between beginPath and closePath.

2.3 style

2.3.1 modify line color

JavaScript Code copies content to the clipboard

Var color

/ / specify RGB value

Color = "rgb (255,0,0)"

/ / specify RGBA value (the last parameter is alpha value, with a value of 0.001.0)

Color = "rgba (255,0,0,1)"

/ / specify hexadecimal code

Color = "# FF0000"

/ / specify with words

Color = "red"

/ / set fill color

Context.fillStyle = color

/ / set border color

Context.strokeStyle = color

2.3.2 modify lineweight

JavaScript Code copies content to the clipboard

/ / specify lineweight value

Var value= 3

/ / set border color

Context.linewidth = value

2.4 draw text

JavaScript Code copies content to the clipboard

/ / specify font style

Context.font = "italic 30px boldface"

/ / draw the text at the point (400.40)

Context.fillText ("Hello world!", 40,40)

2.5 drawing an Ima

Before drawing an image, you need to define the image and load it.

CSS Code copies content to the clipboard

Var img = new Image ()

Img.src = "myImage.png"

Img.onload = function () {

/ / the image is loaded and executed

}

The following is drawImage API's explanation:

JavaScript Code copies content to the clipboard

/ / draw the image image in (xQuery y)

Context.drawImage (image, x, y)

/ / draw the image image of width*height in (xQuery y)

Context.drawImage (image, x, y, width, height)

/ / capture the image of sWidth*sHeight at (sx,sy) of image and draw the image of dWidth*dHeight at (dx,dy)

Context.drawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

3. Advanced featur

Fill the browser window with Canvas

The easiest way is to set the width and height of the canvas element exactly to the width and height of the browser window, and use CSS to eliminate the white space.

CSS Code:

CSS Code copies content to the clipboard

* {

Margin: 0

Padding: 0

}

Html, body {

Height: 100%

Width: 100%

}

Canvas {

Display: block

}

Javascript Code:

JavaScript Code copies content to the clipboard

Function resizeCanvas () {

/ / canvas is obtained by jQuery

Canvas.attr ("width", $(window) .get (0) .innerWidth)

Canvas.attr ("height", $(window) .get (0) .innerHeight)

Context.fillRect (0,0, canvas.width (), canvas.height ())

}

$(window) .resize (resizeCanvas)

ResizeCanvas ()

3.2 drawing status

In canvas, a graph refers to a set of properties that describe the appearance of a 2D rendering context at a given time, including: transformation matrix, crop region, globalAlpha, globalCompositeOperation, strokeStyle, fillStyle, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, and textBaseline.

When you need to change the global state of the canvas, generally save the current state first-call the save method to push the state into the drawing state stack), and then call the restore method to restore the drawing state after the operation.

JavaScript Code copies content to the clipboard

/ / example

Context.save ()

Context.globalAlpha = 0.5

Context.fillRect (0,0,200,100)

Context.restore ()

3.3 deformation

3.3.1 Pan

Move the origin of the 2D rendering context from one location to another. Notice that the coordinate origin, the global drawing location, is moved here, and the API is as follows:

JavaScript Code copies content to the clipboard

/ / move the coordinate origin to (xPowery)

Context.translate (x, y)

3.3.2 Zoom

JavaScript Code copies content to the clipboard

/ / scale the global horizontal and vertical dimensions to x _ ray y times (that is, multiply the original value by the multiplication factor)

Context.scale (x, y)

3.3.3 rotation

JavaScript Code copies content to the clipboard

/ / rotate the canvas radius Radian around the origin

Context.rotate (radius)

Thank you for your reading, the above is the content of "how to use HTML5's Canvas API to draw graphics". After the study of this article, I believe you have a deeper understanding of how to use HTML5's Canvas API to draw graphics, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.