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

This article introduces you how to analyze HTML5 Canvas tags and basic use, the content is very detailed, interested friends can refer to, hope to be helpful to you.

HTML 5 tag definition and usage

Tags define graphics, such as charts and other images.

Labels are just graphics containers, and you must use scripts to draw graphics.

Case study

How to display a red rectangle through the canvas element:

Var canvas=document.getElementById ('myCanvas')

Var ctx=canvas.getContext ('2d')

Ctx.fillStyle='#FF0000'

Ctx.fillRect (0d0pl 80100)

Defines the state-based drawing of the graph

Most Canvas drawing API is not defined in the

The element itself is defined on a "drawing environment" object obtained through the getContext () method of the canvas

Canvas.width canvas.height / / specify the width and height of the canvas

Canvas.getContext ("2d"); / / returns the drawing environment

Context.moveTo (10 ~ (10)) / / start from (10 ~ (10))

Context.lineTo (100100) / / start with (1010) and draw to (100100)

Context.stroke () / / start drawing (lines)

Context.lineWidth=3 / / sets the width of the line

Context.strokeStyle= "# f00" sets the color of lines and the meaning of stroke strokes

Context.fillStyle= "rgb"; context.fill () / / coloring, fill color (color block)

Context.beginPath (); / / define a new path

Context.closePath (); / / used at the end of the path

If the path drawn is not closed, it will be closed automatically. If you do not write closrPath, it will not be closed.

/ / draw a rectangle of 64'36 starting from the coordinates (200.30).

Context.fillRect (20, 30, 64, 36); / / rect rectangle

/ / draw arcs and circles

Context.arc (

Centetx,centery,radius, / / Center coordinates and radius

StartingAngle,enddingAngle, / / which arc value does it start and end with?

Anticlockwise=false / / optional, indicating whether to start drawing clockwise or counterclockwise.

Default: clockwise. True is drawn counterclockwise

)

/ / call the arc function

/ draw an arc with (300300) as the center, 200 as the radius, and draw from 0 to 1.5 PI

Context.arc (300, 300, 200, 0, and 1.5 minutes Math.Pi)

/ / Global variable

WINDOW_WIDTH=1024; WINDOW_HEIGHT=768

/ / call global variables

Canvas.width=WINDOW_WIDTH

/ / render () function render (context)

RenderDigit (0re0parseInt (hours/10), ctx)

What are the characteristics of html 1, simplicity: hypertext markup language version upgrade using superset mode, thus more flexible and convenient, suitable for beginner front-end developers to use. 2. Extensibility: the wide application of hypertext markup language brings the requirements of strengthening functions and increasing identifiers. Hypertext markup language adopts the way of subclass elements to ensure the expansion of the system. 3. Platform independence: hypertext markup language can be used on a wide range of platforms, which is one of the reasons why the World wide Web is so popular. 4. Versatility: HTML is the universal language of the network, which allows web producers to create complex pages that combine text and pictures, which can be viewed by anyone else on the Internet, no matter what type of computer or browser they are using.

On how to analyze HTML5 Canvas tags and the basic use of sharing here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.