<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>八卦图</ TITLE>
<スタイル>
* {
パディング： 0 ;
マージン： 0 ;
}
本体{
テキスト - 整列：センター;
}
#myCanvas {
背景 - 色：#eee。
}
</スタイル>
</ head>
<body>
<キャンバスID = "myCanvas"幅= "600"高さ= "600"> </キャンバス>
<
=のdocument.getElementById myCanvas LET（ "myCanvas" ）;
//は、コンテキスト（PEN）によってキャンバス要素を取得
させmyCanvas.getContext CTX =（ "2D" ）;
// 右白い半
ctx.fillStyle = "#FFF" 。
ctx.beginPath（）;
ctx.arc（ 300、300、100、（にMath.PI / 180）* 270、（にMath.PI / 180）* 90 ）;
ctx.fill（）;
// 左の黒丸
CTX = .fillStyle "＃000" ;
ctx.beginPath（）;
ctx.arc（ 300、300、100、（にMath.PI / 180）* 270、（にMath.PI / 180）90 *、真の）; // 逆右回り円
ctx.fill（）;
// 左小さな丸い白
= ctx.fillStyle "#FFF" ;
ctx.beginPath（）;
ctx.arc（ 300、250、50、（にMath.PI / 180）* 270、（にMath.PI / 180）90 *、真の）;
CTX。フィル（）;
// 右の小さな丸い黒
ctx.fillStyle = "＃000" ;
ctx.beginPath（）;
ctx.arc（ 300、350、50、（にMath.PI / 180）* 270、（にMath.PI / 180）* 90 ）;
ctx.fill（）;
// 黒点
ctx.fillStyle = "＃000" ;
ctx.beginPath（）;
ctx.arc（ 300、250 ,. 5、0、にMath.PI 2 * ）;
ctx.fill（）;
// 小さな白いドット
ctx.fillStyleは= "#FFF" 。
ctx.beginPath（）;
ctx.arc（ 300、350、5、0、にMath.PI * 2 ）。
ctx.fill（）;
</スクリプト>
</ BODY>
</ HTML>