Canvas Draw Rectangle
var drawing = document.getElementById (' drawing '); if (Drawing.getcontext) {var context = Drawing.getcontext (' 2d ');// Draw Rectangle Context.fillstyle = ' #0000ff '; Context.fillrect (10, 10, 50, 50);//Draw Translucent red rectangle Context.fillstyle = ' Rgba (255,0,0,0.5) ' ; Context.fillrect (30, 30, 50, 50);//Draw stroke Rectangle context.linewidth = 1;context.strokestyle = ' #000000 '; Context.strokerect (50 , 50, 50, 50);//clear a small rectangle context.clearrect (40,40,10,10);}
Canvas Drawing Path
var drawing = document.getElementById (' drawing '); if (Drawing.getcontext) {var context = Drawing.getcontext (' 2d ');// Start path Context.beginpath ();//Draw Outer Circle Context.arc (0, 2 * Math.PI, FALSE);//Draw Inner circle Context.moveto (194,100); cont EXT.ARC (94, 0, 2 * Math.PI, FALSE);//Transformation coordinates Origin//context.translate (100,100);//Rotation Origin//context.rotate (1);//Draw Minute hand Context.moveto (100,100); Context.lineto (100,15);//Draw Hour Context.moveto (100,100); Context.lineto (35,100);// Context.stroke ();//Draw text Context.font = "Bold 14px ' Arial '"; context.textalign = "center"; context.textbaseline = "Middle" ; Context.filltext ("12", 100,20);}
Canvas uses image data
Window.onload = function () {var drawing = document.getElementById (' drawing '); if (Drawing.getcontext) {var context = Drawing.getcontext ("2d"), image = document.getElementById (' tulip '), ImageData, Data,i, Len, average,red, Green, blue, alpha;//draws the original image context.drawimage (image, 10, 10);//Get image data ImageData = Context.getimagedata (0,0,image.width, image.height);d ata = imagedata.data;for (i=0, len=data.length; i<len; i+=4) {red = Data[i];green = Data[i+1];blue = Dat A[i+2];alpha = data[i+3];//get rgb mean average = Math.floor ((red+green+blue)/3);//Configure color values, transparency unchanged data[i] = Average;data[i +1] = average;data[i+2] = average;} Write back image data Imagedata.data = Data;context.putimagedata (ImageData, 400, 400);}}
JavaScript Advanced Programming: Canvas Drawing