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

In this article, the editor introduces in detail "how to use HTML5's canvas to draw", the content is detailed, the steps are clear, and the details are handled properly. I hope this "how to use HTML5's canvas to draw" article can help you solve your doubts.

Canvas has a variety of ways to draw paths, rectangles, circles, characters, and add images. We draw graphics in the Canvas area, not in Canvas with the mouse. In fact, the Canvas element is just a colorless and transparent area, just like a DIV with only width and height and no background, in which you need to use a JavaScript script to paint.

Example 1: draw a square

We create a canvas element on the page and specify the id and width and height.

Your?browser?does?not?support?the?canvas?tag

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

Var?c=document.getElementById ("square"); Var?cxt=c.getContext ("2d")

Cxt.fillStyle= "# ff0000"

Cxt.fillRect (0jue 0150,150,75)

Get the canvas element through document.getElementById ("square"), and then use c.getContext ("2d") to get the 2d drawing object. It is then dyed red using the fillStyle method, and the fillRect method specifies the shape, position, and size. A red square is drawn in the above example.

Example 2: draw lines

We can draw a straight line by starting coordinates and ending coordinates.

Var?line=document.getElementById ('line');? Var?c=line.getContext ('2d')

C.moveTo (20 and 20)

C.lineTo (200100)

C.lineTo (20100)

C.stroke ()

MoveTo (xPowery): sets the drawing starting coordinates.

LineTo (XMagol y): the last starting point can be specified by moveTo from the previous starting point to the dotted line (XMagol y). By default, it is the end of the original path.

Stroke (): stroke path.

Example 3: draw a circle

We can draw a circle by specifying the size, color and location.

Var?c=document.getElementById ('circle');? Var?r=c.getContext ('2d')

R.fillStylehammer

R.beginPath ()

R.arc (70, 80, 45, 0, and 0, Math.PItem2, true)

R.closePath ()

R.fill ()

BeginPath (): the first step in creating a path is to call the beginPath method, which returns information about a stored path.

ClosePath (): closes the path from the current point to the starting point.

Arc (radius y, radius, startAngle, endAngle, anticlockwise) is the center of the arc, radius- radius, startAngle and endAngle are the beginning and end radians of the arc (radians = (Math.PI/180) * degree), if anticlockwise is true, it is counterclockwise, otherwise it is clockwise.

FillStyle: sets the fill color.

Fill (): populate the path.

Example 4: animating

We can use javascript to dynamically draw images on the canvas and produce animation effects.

Var?x=0;? Var?y=0;? Var?ctx?=?document.getElementById ("animate"). GetContext ("2d")

SetInterval (function () {

Ctx.clearRect (0Pol 0600600)

Ctx.fillStyle= "# fc0"

Ctx.beginPath ()

Ctx.arc (X-ray records, y-colors, 15-0, Math.PIQ2, true)

Ctx.closePath ()

Ctx.fill ();}, 10)

In the above code, we use setInterval () to run regularly (every 10 milliseconds), draw a yellow circle in the canvas, and clearRect () to clear the last circle before drawing, so that it looks like a simple animation of a ball moving from the upper left corner to the lower right corner of the canvas.

Canvas can also load images, draw color gradient patterns, produce shadow effects, etc., this site helloweba will have more canvas effect explanation. Canvas is a very lightweight tag, but you are absolutely shocked by the dazzling effect that can be done with it. With the support of JavaScript scripts, Canvas can achieve almost all the effects you can think of.

Read here, this article "how to use HTML5 canvas to draw" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

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.