Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use canvas tags in HTML5". In daily operation, I believe many people have doubts about how to use canvas tags in HTML5. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to use canvas tags in HTML5". Next, please follow the editor to study!

The canvas label in HTML5 is "". Canvas tag for graphics drawing, it is just a rectangular graphics container, drawing graphics must be done through a script (usually JavaScript); developers can use a variety of js methods to draw paths, boxes, circles, characters and add images in canvas.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

The canvas label in HTML5 is "".

Canvas tag is used to draw graphics, it is just a rectangular graphics container, drawing graphics must be done through a script (usually JavaScript).

Developers can use canvas to draw paths, boxes, circles, characters, and add images in a variety of ways.

Create a canvas (Canvas)

A canvas is a rectangular frame on a web page, drawn by elements.

Note: elements have no borders and content by default.

A simple example is as follows:

Note: tags usually need to specify an id attribute (often referenced in scripts), the size of the canvas defined by the width and height attributes.

Tip: you can use multiple elements in the HTML page.

Use the style property to add a border:

Use JavaScript to draw an image

The canvas element itself does not have the ability to draw. All drawing work must be done within JavaScript:

HTML Code:

Your browser does not support HTML5 canvas tags.

Javascript Code:

Var c=document.getElementById ("myCanvas"); var ctx=c.getContext ("2d"); ctx.fillStyle= "# FF0000"; ctx.fillRect (0memo 150,150,75)

Instance resolution:

First, find the element:

Var c=document.getElementById ("myCanvas")

Then, create the context object:

Var ctx=c.getContext ("2d")

The getContext ("2d") object is a built-in HTML5 object with a variety of ways to draw paths, rectangles, circles, characters, and add images.

The following two lines of code draw a red rectangle:

Ctx.fillStyle= "# FF0000"; ctx.fillRect (0memrine 15015015075)

Setting the fillStyle property can be a CSS color, gradient, or pattern. The default setting for fillStyle is # 000000 (black).

The fillRect method defines the current filling method of the rectangle.

Canvas coordinates

Canvas is a two-dimensional grid.

The coordinate of the upper-left corner of canvas is (0pm 0).

The above fillRect method has parameters (0re0rec 15015015075).

Draw a 150 × 75 rectangle on the canvas, starting at the upper left corner (0jin0).

Coordinate instance

As shown in the following figure, the X and Y coordinates of the canvas are used to position the painting on the canvas. The positioning coordinates are displayed on the rectangular box moved by the mouse.

Canvas path

To draw lines on Canvas, we will use the following two methods:

MoveTo (xPowery) defines the line start coordinates

LineTo (xPowery) defines the line end coordinates

We must use the method of "ink" to draw lines, just like stroke ().

For example:

Define the start coordinates (0J0) and the end coordinates (200100). Then use the stroke () method to draw the line:

HTML Code:

Your browser does not support HTML5 canvas tags.

Javascript Code:

Var c=document.getElementById ("myCanvas"); var ctx=c.getContext ("2d"); ctx.moveTo (0Power0); ctx.lineTo (200100); ctx.stroke ()

To draw a circle in canvas, we will use the following javascript method:

Context.arc (x _ journal y _ r _ r _ Angle _ rep _ e _ Angle _ counterclockwise)

Parameter values:

Definition and usage

The arc () method creates an arc / curve (used to create a circle or partial circle).

Tip: to create a circle through arc (), set the start angle to 0 and the end angle to 2*Math.PI.

Tip: use the stroke () or fill () method to draw the actual arc on the canvas.

Centre: arc (100.75jpg500.Math.Pi 1.5Math.pi)

Starting angle: arc (100, 75, 50, 50, 0, 1.5) Math.Pi)

Ending angle: arc (100, 75, 50, 0Math. Pi, 1.5. Math.Pi)

We actually use the "ink" method when drawing circles, such as stroke () or fill ().

Var c=document.getElementById ("myCanvas"); var ctx=c.getContext ("2d"); ctx.beginPath (); ctx.arc (95, 50, 40, and 0); ctx.stroke ()

At this point, the study on "how to use canvas tags in HTML5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.