HTML5 's Canvas

Canvas creation, canvas picture drawing and picture encapsulation, rectangle, rectangle border, circle, line drawing.

The JavaScript code is as follows: Main.js

/** * Created by zengkm on 15-9-1.*/    //InitializevarMyworld=function() {Console.log ("Output something."); varCanvas = document.getElementById ("My_canvas"); Canvas.width= "800"; Canvas.height= "400"; varContext =canvas.getcontext ("2d");    Drawcanvas (context);  for(vari=0;i<4;i++) {drawimg (context,"Res/heh.png", 200*i,50); }}//Drawing on CanvasvarDrawcanvas =function(CTX) {//Rectangle Drawing    //parameters: x-coordinate, y-coordinate, width, heightCtx.fillstyle= "#FFCC00"; Ctx.fillrect (200,150,100,100); //Rectangle Border Drawing    //parameters: x-coordinate, y-coordinate, width, heightCtx.strokestyle = "FF0000"; Ctx.strokerect (400,150,100,100); //drawing of a circle    //parameters: x-coordinate, y-coordinate, circle radius, starting Radian, end radian, arc drawing direction bool valueCtx.arc (50,200,50, (math.pi/180) *0, (math.pi/180) *360,false); Ctx.fill ();//the drawing of the garden fills    //Drawing of LinesCtx.fillstyle = "ff89a"; Ctx.linepath=5; Ctx.beginpath ();//identify start drawingCtx.moveto (700,200); Ctx.lineto (600,200); Ctx.stroke ();//fill drawing of linesCtx.closepath ();//Close Drawing}//Canvas Picture DrawingvarDrawimg =function(ctx,srcurl,x,y) {varIMG =NewImage (); IMG.SRC=Srcurl; Img.onload=function(){        //Parameters: IMG object, x-coordinate, y-coordinatectx.drawimage (img,x,y); }}window.onload= MyWorld ();

HTML code: index.html

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "UTF-8">    <title>Canvas implementation</title></Head><Body><CanvasID= "My_canvas"style= "Background-color:green"width= "The "Height= "$"></Canvas><Scriptstyle= "Text/javascript"src= "Src/main.js"></Script></Body></HTML>

The effect of the final implementation, the canvas color is green, the first line loops the picture 4, the second line draws a circle, a rectangle, a rectangular border, a line.

HTML5 's Canvas