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

This article will explain in detail how html5-Canvas draws all kinds of graphics in web. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

I think the most important thing in html5 is the introduction of Canvas, so that we can draw all kinds of graphics in web. It gives people the feeling of blurring our web and desktop programs at this point alone. There are also xml-based drawings such as VML and SVG in web outside html5. Canvas is a pixel-based drawing. Canvas is a html node equivalent to an artboard, and we have to manipulate the drawing with js.

As follows:

Your browser doesn't support definitions yet.

We can get that the canvas object is var c=document.getElementById ("myCanvas"); its js attribute method is listed as follows:

1: draw render object, c.getContext ("2d"), get 2d drawing object, no matter how many times we call to get the object will be the same object.

2: drawing method:

ClecrRect (left,top,width,height) clears the defined rectangular area

FillRect (left,top,width,height) draws a rectangle and fills it with fillStyle.

FillText (text,x,y) draw text

StrokeRect (left,top,width,height) draws a rectangle and a boundary in strokeStyle.

BeginPath (): turn on the drawing of the path and reset path to its initial state

ClosePath (): draws the path to the end of path, which draws a closed interval and adds a closed curve from the starting position to the current coordinates

MoveTo (xPowery): sets the actual coordinates of the drawing.

LineTo (XMagol y); draw a straight line from the current actual position to XBI y.

Fill (), stroke (), clip (): after completing the final fill and boundary outline of the drawing, the clip area.

Arc (): draw the arc, center position, start Radian, and end Radian to specify the location and size of the arc

Rect (): rectangular path

DrawImage (Imag img): drawing pictures

QuadraticCurveTo (): quadratic spline path, parameter two control points

BezierCurveTo (): Bezier curve, parameter three control points

CreateImageData,getImageData,putImageData: pixel data in Canvas. ImageData is to record width, height, and data data, in which data is our pigment

Argb, so the size and length of the array is width*height*4 and the order is rgba. GetImageData is to get rectangular area pixels, while putImageData is to set rectangular area pixels

... And so on!

3: coordinate transformation:

Translate (xPermine y): translation transformation, the origin is moved to coordinates (xperiary y)

Rotate (a): rotate transform, rotate a degree angle

Scale (XBI y): stretching transformation

Save (), restore (): provide and a stack, save and restore the drawing state, save push the current drawing state onto the stack, restore off the stack, restore the drawing state

... And so on!

Okay, it's too late. Attach my test code,:

The code is as follows:

Your browser doesn't support it yet.

Var width,height,top,left

Width=height=100

Top=left=5

Var Xbox 10

Var yearly 10

Var c=document.getElementById ("myCanvas")

Var maxwidth=c.width-5

Var maxheight=c.height-5

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

Cxt.strokeStyle= "# 00f"

Cxt.strokeRect (0pd0rec. Widthrec. Height)

Var img=new Image ()

Img.src= "1.gif"

Var MyInterval=null

Start ()

Function Refresh () {

Cxt.clearRect (left,top,width,height)

If ((left+x) > (maxwidth-width) | | left+x (maxheight-height) | | top+y=rectx&&x=recty&&y

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.