コメント：この記事では、主にHTML5キャンバスジャガーグラフコードの例を紹介します。それを必要とする友達はそれを参照できます。
複製画像：
ヒント：コードをHTMLファイルにコピーして保存し、直接開いて効果を確認します。
実装コード：
<html lang = "zh">
<head>
<メタcharset = "gbk">
<Title> SawToothed Graph </title>
<script type = "text/javascript">
window.addeventlistener（ "load"、eventWindowLoaded、false）;
関数eventWindowLoaded（）{
var x、y;
var thecanvas = document.getElementById（ "Canvas"）;
var context = thecanvas.getContext（ "2d"）;
//箱
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>
<canvas>
</div>
</body>
</html>