HTMLレンダリング太極拳八卦マップ

結果を達成するため、次のとおりです。

 

 

次のようにコードは次のとおりです。

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタのcharset = "UTF-8" > 
    < タイトル>太极八卦图</ タイトル> 
    < スタイルタイプ= "テキスト/ cssの" > 
        のdiv { 
            テキスト整列：センター; 
            マージントップ：30px ; 
        } 
        #mytj { 
            背景色：スカイブルー。        
        } 
    <スタイル> 
</ ヘッド> 
< 身体> 
    < divの> 
        < キャンバスの幅= "600PX" 高さ= "600PX" ID = "mytj" > </ キャンバス> 
    </ divの> 
    < スクリプトタイプ= "テキスト/ javascriptの" > 
        のvar mytj = のdocument.getElementById（' mytj ' ）。
        VaRのMT = mytj.getContext（' 2D ' ）;

        
        mt.beginPath（）;     
        mt.arc（300 、300 、200は、90 * にMath.PI / 270 *にMath.PI、180として/ [180 、偽に）; 
        mt.fillStyle = ' ＃000 ' ; 
        mt.fill（）; 

        // 右半円に大きな白い
        mt.beginPath（）;     
        mt.arc（300 、300 、200は、270 * にMath.PI / 180,90 *にMath.PI / 180 、falseに）。
        mt.fillStyle = ' #FFF ' ; 
        mt.fill（）; 

        // 白い半円形として左
        mt.beginPath（）;     
        mt.arc（300 、200は、100 、90 * にMath.PI / 180として、270 *にMath.PI / 180 [ 、偽に）; 
        mt.fillStyle = ' #FFF ' ; 
        mt.fill（）; 

        // 右半円形黒
        mt.beginPath（）;     
        mt.arc（300 、400 、100 、270* にMath.PI/ 180,90 *にMath.PI / 180 、偽に）; 
        mt.fillStyle = ' ＃000 ' ; 
        mt.fill（）; 

        // 左小さな丸い黒
        mt.beginPath（）;     
        mt.arc（300 、200は、50 、0 * にMath.PI / 180360 *にMath.PI / 180 、偽に）; 
        mt.fillStyle = ' ＃000 ' ; 
        mt.fill（）; 

        // 右ラウンド白
        mt.beginPath（）;    
        mt.arc（300 、400 、50 、0 * にMath.PI / 180360 *にMath.PI / 180 、偽）。
        mt.fillStyleは= ' #FFF ' ; 
        mt.fill（）; 

    </ スクリプト> 
</ ボディ> 
</ HTML >