Figure:
Tip: Copy the code to an HTML file and save it and open it to see the effect.
Implementation code:
code is as follows: <!doctype html>
<html lang= "en" >
<head>
<meta charset= "GBK" >
<title> sawtooth Chart </title>
<script type= "Text/javascript" >
Window.addeventlistener ("Load", eventwindowloaded, false);
function eventwindowloaded () {
var x,y;
var Thecanvas = document.getElementById ("Canvas");
var context = Thecanvas.getcontext ("2d");
//box
context.strokestyle = ' #00f ';
context.linewidth=10;
context.strokerect (0, 0, thecanvas.width-0, thecanvas.height-0);
Context.fillstyle = "#00f";
for (x=5;x<=canvas.width;x=x+10) {
Context.beginpath ();
Context.arc (X,5,5,0,math.pi,false);
Context.closepath ();
Context.fill ();
Context.beginpath ();
Context.arc (x,canvas.height-5,5,0,math.pi,true);
Context.closepath ();
Context.fill ();
}
for (y=5;y<=canvas.height;y=y+10) {
Context.beginpath ();
Context.arc (5,y,5,0,math.pi*2,true);
Context.arc (canvas.width-5,y,5,0,math.pi*2,true);
Context.closepath ();
Context.fill ();
}
}
</script>
</head>
<body>
<div style= "Position:absolute; top:100px; left:100px; " >
<canvas id= "Canvas" width= "height=" >
</div>
</body>
</html>
