"HTML" Canvas Learning Summary

1. Draw Basic Graphics

1.1 Drawing lines

Canvas.getcontext (' 2d ') get context

Ctx.beginpath () Start drawing a new path

Ctx.closepath () End Current path

Ctx.save () saves the current context

Ctx.restore () Revert to the last saved context

Ctx.moveto (x, y) move the plot point to X, y

Ctx.lineto (x, y) draws the line from the current point to X, y

Ctx.linewidth Setting the width of a line

Ctx.strokestyle setting the color of a line

Ctx.fill () Fill graphic

Ctx.stroke () drawing, general fill in front of drawing, avoid padding occlusion width

 var  canvas = document.getElementById (' MyCanvas '  if   (Canvas.getcontext) { var  CTX = Canvas.getcontext (' 2d ' );} Ctx.beginpath ();  //  start path draw  Ctx.moveto (20, 20); //  Set the starting point of the path with the coordinates (20,20)  Ctx.lineto (200, 20); //  draw a line to (200,20)  ctx.linewidth = 1.0; //  set line width  ctx.strokestyle = "#CC0000"; //  Set the color of the line  Ctx.stroke (); //  draw rectangle  

1.2 Drawing rectangles

Ctx.fillrect (x1, y1, x2, y2); Draws a rectangle with the upper-left coordinate x1,y1 the lower-right corner coordinate x2,y2

Ctx.fillstyle Rectangle Fill Color

　　

var canvas = document.getElementById (' MyCanvas '); if (canvas.getcontext) {    var ctx = Canvas.getcontext (' 2d '= ' yellow ';   Set Solid color ctx.fillrect (50, 50, 200, 100); // draw a filled rectangle

Ctx.fill ();//Fill Rectangle
Ctx.stroke ();//Draw Rectangle

Ctx.strokerect (10,10,200,100); // draw a hollow rectangle
Ctx.clearrect (100,50,50,50); // clears the contents of a rectangular area

1.3 Draw Circle & Sector

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);　　x和y参数是圆心坐标，radius是半径，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）

varCanvas = document.getElementById (' MyCanvas ');if(canvas.getcontext) {varCTX = Canvas.getcontext (' 2d ');}//Solid CircleCtx.beginpath (); Ctx.arc (0, Math.pi*2,true); Ctx.fillstyle= "#000000"; Ctx.fill (); Ctx.stroke ();//Hollow CircleCtx.beginpath (); Ctx.arc (0, Math.pi*2,true); Ctx.linewidth= 1.0; Ctx.strokestyle= "#000"; Ctx.stroke ();

1.4 Draw the Pentagram

1.5 Drawing gradient Colors

Createlineargradient (x1,y1,x2,y2) draws a linear gradient from the beginning of the x1,y1, x2,y2 terminates, such as (0,0,0,100) a linear gradient from top to bottom, (0,0,100,0) from left to right

var canvas = document.getElementById (' MyCanvas '); if (canvas.getcontext) {    var ctx = Canvas.getcontext (' 2d ');} var // a linear gradient from top to bottom Mygradient.addcolorstop (0, "#BABABA"); Mygradient.addcolorstop (1, "#636363"= Mygradient;ctx.fillrect (10,10,200,100);

1.6 Shadows

var canvas = document.getElementById (' MyCanvas '); if (canvas.getcontext) {    var ctx = Canvas.getcontext (' 2d ') );}

// Set Horizontal Displacement // Set Vertical Displacement // setting the degree of ambiguity // Set Shadow color  = "#CC0000"; Ctx.fillrect (10,10,200,100);

1.7 Drawing text

var canvas = document.getElementById (' MyCanvas '); if (canvas.getcontext) {    var ctx = Canvas.getcontext (' 2d '//  set Font Ctx.textalign = "Left"; // Set Alignment // Set Fill Color // set the font content, as well as the position on the canvas ctx.stroketext ("hello!", 10, 100); // Draw Hollow Words

"HTML" Canvas Learning Summary