HTML Canvas Simple Experience

Draw a line

var canvas = document.getElementById (' C1 ');

var context = Canvas.getcontext (' 2d ');

Context.moveto (10, 50); starting point

Context.lineto (1000,50); End

Context.linewidth = 20; line width

context.strokestyle= ' #cd3828 '; Color

Context.strokestyle= "RGB (205,40,40)";

Context.linecap = ' round '; the threads are round round .

Context.stroke (); Start Drawing

draw a second line

Context.beginpath ();

Context.moveto (20,120);

Context.lineto (200,120);

context.strokestyle= ' #eecddd ';

Context.linecap = ' butt ';

Context.stroke ();

Draw the third article

Context.beginpath ();

Context.moveto (120,210);

Context.lineto (500,210);

context.linewidth=20;

context.strokestyle= ' #defeed ';

context.linecap= ' Square ';

Context.stroke ();

Draw Triangles

Context.moveto (250, 50);

Context.lineto (50,250);

Context.lineto (450,250);

Context.lineto (250,50);

Context.linewidth = 10;

Context.strokestyle= ' Blue ';

context.linejoin= ' round '; the edge of the cohesion shape round/bevel/mitre

Context.stroke ();

Fill Triangle

Context.closepath ();

context.fillstyle= ' Red ';

Context.fill ();

Draw a rectangle

Strokerect (0,10,100,200);

FillRect (0,10,100,200);

Drawing curves

var canvas = document.getElementById (' C1 ');

var context = Canvas.getcontext (' 2d ');

drawing Arcs

Context.moveto (62,24);

var control1_x = 187;

var control1_y = 32;

var control2_x = 429;

var control2_y = 480;

var endpointx = 365;

var endpointy = 133;

Drawing Curves

Context.beziercurveto (control1_x, control1_y, control2_x, control2_y, Endpointx, Endpointy);

Context.stroke ();

Draw a square

var canvas = document.getElementById (' C1 ');

var context = Canvas.getcontext (' 2d ');

To achieve the original point graph rotation

Context.translate (100, 100);

Draw ten squares

var copies = 10;

for (var i=1; i < copies; i++) {

Context.rotate (2*MATH.PI * 1/(copies-1));

Context.rect (0,0,60,60);

}

Context.stroke ();

Color Fill

var canvas = document.getElementById (' C1 ');

var context = Canvas.getcontext (' 2d ');

the realization of the transparent degree

Context.fillstyle = "RGB (100,150,185)";

Context.linewidth = 10;

Context.strokestyle = "Red";

Draw a circle

Context.arc (0, 2*math.pi);

Context.fill ();

Context.stroke ();

Draw Triangles

Context.beginpath ();

Context.fillstyle = "Rgba (100,150,185,0.5)";

Context.moveto (215,50);

Context.lineto (15,250);

Context.lineto (315,250);

Context.closepath ();

Context.fill ();

Context.stroke ();

HTML Canvas Simple Experience