HTML5 Canvas draws a square, html5canvas Square

HTML5 Canvas draws a square, html5canvas Square

Draw a square with Canvas in HTML5

1. Design source code

<! DOCTYPE html> 

2. design results





3. Analysis description
(1) Get the Canvas Element
Var canvas = document. getElementById ("canvas ");



(2) Get Context
Var context = canvas. getContext ('2d ');


(3) Fill in the drawn border
Context. fillStyle = "# EEEEFF"; // filled Style


(4) set the drawing style
StrokeStyle: border Style


(5) Specify the line width
Context. lineWidth = 150;


(6) Specify the color value
 
(7) draw a square
Context. fillRect (50, 50, 500,500 );
Context. strokeRect (50, 50, 500,500 );