First put a canvas element in the HTML page, including canvas element should have three attribute ID, width, height.

  code is as follows:  


<Canvas id="demo" width="600" height="600" ></canvas>

canvas object and obtain context var CXT=document. The getElementById (' demo '). GetContext (" " 2 d ; The parameter 2 d is certain.

start drawing, there are two forms, one is the stroke (fill), is a kind of filler (stroke).

javascript code:

  code is as follows:  


<Script language="javascript" >
var CXT=document. GetElementById (' demo '). GetContext (" 2 d ");
CXT. BeginPath ();
CXT. FillStyle="# F00;"/* * set the fill color/
CXT. FillRect,0,200,100 (0);/* to draw a rectangle, the former two parameters decided to start position, the latter two, respectively is the rectangle's width and height */
CXT. BeginPath ();
CXT. StrokeStyle="# 000"; Bezel Settings *//*
CXT. Our lineWidth=3; The width of the bezel/* */
CXT. StrokeRect (0120200100);
CXT. BeginPath ();
CXT. MoveTo (0350);
CXT. LineTo (100250);
CXT. LineTo (200300);
CXT. ClosePath ();/* optional step, close the path of the map */
CXT. The stroke ();
</script>

rendering:

# 0 - #


This concludes the body part