Canvas Drawing (HTML5 new features)

• Canvas

To use the <canvas> object, you need to set the property: Width,height. Specifies the area size of the drawing. The information that appears before and after the canvas label is displayed in browsers that do not support the <canvas> element. As follows:

<canvas id= "Drawing" width= "All" height= "$" >a drawing of Something</canvas>

To draw on this canvas, you need to get the drawing context. Obtaining a reference to a drawing context object requires calling the GetContext () method and passing in the name of the context. Incoming "2d" gets the 2D context object.

1 <canvas id= "Drawing" width= "All" height= ">a drawing" of something</canvas>2 < Script type= "Text/javascript" >3     var drawing=document.getelementbyid ("drawing"); 4     if (drawing.getcontext) {     //detects if the method that gets the drawing context object exists 5         var context= Drawing.getcontext ("2d"); 6 7     }8 </script>

To export an image drawn on a <canvas> element, use the Todataurl () method. parameter is the type format of the image

1<canvas id= "Drawing" width= "All" height= "$" >a drawing of Something</canvas>2<script type= "Text/javascript" >3     varDrawing=document.getelementbyid ("Drawing");4     if(drawing.getcontext) {5         varImgurl=drawing.todataurl ("Image/png");6         varImage=document.createelement ("img");7Image.src=Imgurl;8 Document.body.appendChild (image);9 Ten     } One</script>

• The context

Coordinates start at the top left corner of the <canvas> element and draw a simple 2D graphic.

The operations are mostly divided into strokes and padding of two operations, with the attributes: FillStyle (padding), Strokestyle (stroke).

• Draw a rectangle (related method: FillRect (), Strokerect (), Clearrect () clears the rectangular area on the canvas)

1<canvas id= "Drawing" width= "All" height= "$" >a drawing of Something</canvas>2<script type= "Text/javascript" >3     varDrawing=document.getelementbyid ("Drawing");4     if(drawing.getcontext) {5         /*var imgurl=drawing.todataurl ("Image/png");6 var image=document.createelement ("img");7 Image.src=imgurl;8 Document.body.appendChild (image);*/9         varContext=drawing.getcontext ("2d");Tencontext.fillstyle= "Red"; OneContext.fillrect (10,10,50,50); AContext.fillstyle= "Rgba (0,0,255,0.5)"; -Context.fillrect (30,30,50,50); -  the  -     } -</script>

• draw a path on the canvas : First Call the Beginpath () method, which indicates that you want to start drawing a new path, and then call the method: Arc (), ArcTo (), LineTo (), MoveTo (), Quadraticcurveto (), rect () , then select: Closepath () method, fill (), stroke () after the path is created.

Draw the clock:

1<canvas id= "Drawing" width= "All" height= "$" >a drawing of Something</canvas>2<script type= "Text/javascript" >3     varDrawing=document.getelementbyid ("Drawing");4     if(drawing.getcontext) {5         varContext=drawing.getcontext ("2d");6 Context.beginpath ();7         //Draw an outer circle8Context.arc (100,100,99,0,2*math.pi,false);9         //Draw Inner CircleTenContext.moveto (194,100); OneContext.arc (100,100,94,0,2*math.pi,false); A         //draw the minute hand -Context.moveto (100,100); -Context.lineto (100,15); the         //Draw the hour hand -Context.moveto (100,100); -Context.lineto (35,100); -         //Strokes + Context.stroke (); -     } +</script>

• Draw Text : Filltext () and Stroketext () four parameters: The text character to be drawn, the x-coordinate, the y-coordinate, and the optional maximum pixel width. Properties: Font (Text style, size, font), textAlign (text alignment), Textbaseline (baseline of text).

1         Context.font= "Bold 14px Arial"; 2         context.textalign= "center"; 3         Context.textbaseline= "Middle"; 4         Context.filltext ("12", 100,20);

Transform: Rotate () rotates around the point of rotation, scale () scales a certain percentage, translate () translates, transform,settransform.

• Draw the Image: draw the image onto the canvas, DrawImage () method.

1         var img=document.images[0]; 2         Context.drawimage (img,100,100);

• Shadow

Shadowcolor: Shadow color.

SHADOWOFFSETX: The shadow offset in the direction of the shape or path x-axis.

SHADOWOFFSETX: The shadow offset in the direction of the y-axis of the shape or path.

Shadowblur: number of blurred pixels.

These properties are modified by the context object. The settings are completed before drawing and can automatically generate shadows.

Canvas Drawing (HTML5 new features)