使用して、クロックを描くキャンバス

今日はH5キャンバス、使用の下で練習を見ました。完璧です。。。

 

 

クラスクロック{ 
    コンストラクタ（キャンバス）{ 
        この .canvas = キャンバス。
    } 

    {）（描画
        CTXを聞かせ = この .canvas.getContext（ "2D" ）。
        
        ctx.setDefault = 関数（）{ 
            CONST default_strokeStyle = "＃000000" 。
            この .strokeStyle = default_strokeStyle。
        } 

        この.drawClockDialPlate（CTX）。
        この.drawClockDial（CTX）; 

    } 

    // 画表盘
    drawClockDialPlate（CTX）{  
        ctx.beginPath（）。
        ctx.strokeStyle = "青" 。
        ctx.lineWidth = 2 ; 
        ctx.arc（ 400、300、200、0、2 *にMath.PIでfalseに、）
        ctx.stroke（）; 

        ctx.setDefault（）; 
    } 

    // ビデオダイヤル
    drawClockDial（CTX）を{ 

        ctx.beginPath（）; 
        ctx.translate（ 400、300 ）; 
        ctx.lineWidth = 1 ; 

        LETスケール = 30; // すべての時間に対応する30度

        せRG = ctx.createRadialGradient（0、0、180、0、0 、185 ）; 
        rg.addColorStop（ 0.9、.canvas.style.backgroundColor）; 
        rg.addColorStop（この 1、 "ブルー"。）; 
        ctx.strokeStyle = RG; 

        のため（LET AN = 0; AN <360; AN + = スケール）{ 

            // 最初のサブビデオ 
            CTX。 moveTo（0、0 ）; 
            ctx.lineTo（ 200、0 ）; 
            ctx.rotate（スケール *にMath.PI / 180 [ ）; 
        } 

        ctx.stroke（）; 

        // 繰り返しビデオ明白な原因の時間スケール
        ctx.beginPath（ ）; 
        スケール = 6; // 分ごとに6°に対応する 
        RG ctx.createRadialGradient =（0、0、190、0、0、195 ）; 
        rg.addColorStop（0.9、この.canvas.style.backgroundColor）; 
        rg.addColorStop（ 1、 "青" ）; 
        ctx.strokeStyle = RG; 
        
        ため AN <360;（AN = 0せAN + = スケール）{ 
 
            // 繰り返し絵画明らか時間マーカー原因
            IF（30 == 0％！）{ 
                ctx.moveTo（ 0、0 ）; 
                ctx.lineTo（ 200、0 ）; 
            } 

            ctx.rotate（スケール *にMath.PI / 180 ）; 

        } 
        
        CTX .stroke（）; 

        ctx.setDefault（）; 
        ctx.translate（ -400、-300）; // 還元
    } 

} 

キャンバスせ =のdocument.createElement（ "キャンバス" ）。
スタイルましょう = canvas.style。
[canvas.width、canvas.height] = [800、600 ]。
[style.backgroundColor、style.position、style.zIndex] = [ "グリーン"、 "絶対"、1 ] 
document.body.prepend（キャンバス）。

新しい時計（キャンバス）.draw（）;