canvasクロック効果を実現

HTML 5のcanvasの実用的な入門の小さな例は、一歩一歩来ています.学習の最良の方法は実践であり、HTML 5 Canvas参考マニュアルを参考にし、自分の試みと実践を加えることで、すぐにcanvas時計を手に入れることができます.オンラインデモ
シャドウ付き文字盤

現在のcanvasの幅var width=ctx.canvas.width;

を取得する.

半径rを宣言するときに、いくつかの影と線幅の幅var r=width/2-8;

を残す.

シャドウ:shadowBlur, shadowColor, shadowOffsetX, ctx.shadowOffsetY

グラデーション:createRadialGradient, addColorStop

円:arc

円周率、PI大文字:Math.PI

再マッピングセンタtranslate

めもり

影を落とす

は再び(0,0)から始まります.そうでないと、円上3の位置からctx.beginPath();

に始まります.

目盛りは1本の線で、lineTo, stroke

で

目盛り均一分布文字盤、角度を計算する必要があり、正弦余弦を使用する必要がある

正弦sin=対辺/斜辺

コサインcos=隣接/斜辺

Math.sin()およびMath.cos()の角度は円弧であり、円弧=円弧長/半径

である.

の整点の位置は5の倍数であり、i%5==0で

と判断する.
ししん

ポインタは線で、lineTo, stroke

で

ポインタは回転し、rotate

で

ポインタキャップは丸い、ctx.lineCap="round";

で

は、先頭ctx.save();、末尾ctx.restore();が必要である、そうでなければ開始位置が

に変化する.

の開始角は目盛り3の位置、ctx.rotate(2*Math.PI/60*(min-15));

である.

時計回りの位置も分針の影響を受け、ctx.rotate(2*Math.PI/12*(hour-3)+2*Math.PI/12/60*min);

.

先に回転してから線を引く

秒針は比較的細く、4点の線と

を充填する.

理論的には3つのポインタ関数が統合されるべきだが、3つはそれぞれ異なるので、私は統合しない.

ポインタ固定の一端は長さを少し残して、円固定

を追加しなければならない.
時計を動かして

現在時刻new Date(); getHours(); getMinutes(); getSeconds()

を取得する.

タイマーを設定し、毎秒新しい時間setInterval()

を取得する.

しかしひっきりなしに重なり合って描くことができて、毎秒1回の矩形をクリアします:ctx.clearRect(0,0,width,height);

修飾が完璧である.

setIntervalは1秒間隔で実行されるので、一度実行しないと1秒停止して時計が表示されます.

どこがsaveで、どこがrestoreで、どのように区別しますか?

は、キャンバスサイズを変化させる変数rem=width/300を宣言し、クロックは正常に表示され、半径rがwidthに関連付けられていることに注意し、このパラメータremを繰り返す必要はありません.

完全なコード

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var width=ctx.canvas.width;  //    canvas   
var height=ctx.canvas.height;
var rem=width/300; //  ，            
var r=width/2-8*rem;  //           ；  r    width   ，     r    *rem

//   
function drawBg(){
    ctx.save();
    ctx.translate(width/2,width/2);  //         canvas  ，       
    ctx.lineWidth=4*rem;
    ctx.shadowBlur=3*rem;
    ctx.shadowColor="#222";  //        
    ctx.shadowOffsetX=3*rem;
    ctx.shadowOffsetY=3*rem;
    ctx.strokeStyle="#666";  //    
    var grd=ctx.createRadialGradient(0,0,10*rem,0,0,r); //          10 r   
    grd.addColorStop(0,"#fefefe");
    grd.addColorStop(1,"#dedede");
    ctx.fillStyle=grd;  //      ，              
    ctx.arc(0,0,r,0,2*Math.PI);  //          ，           。
    ctx.stroke();
    ctx.fill();
    //ctx.restore();
}
//   
function drawScale(){
    //ctx.save();
    ctx.shadowBlur = 0;
    ctx.shadowColor = "";
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    for(var i=0;i<60;i++){
        ctx.beginPath();
        if(i%5==0){
            ctx.strokeStyle="#222";
            ctx.lineWidth=4;
            ctx.lineTo((r-8*rem)*Math.cos(2*Math.PI/60*i),(r-8*rem)*Math.sin(2*Math.PI/60*i));
        }else{
            ctx.strokeStyle="#666";
            ctx.lineWidth=2;
            ctx.lineTo((r-4*rem)*Math.cos(2*Math.PI/60*i),(r-4*rem)*Math.sin(2*Math.PI/60*i));
        }
        ctx.lineTo(r*Math.cos(2*Math.PI/60*i),r*Math.sin(2*Math.PI/60*i));
        ctx.stroke();
    }
    //ctx.restore();
}
//   
function drawHour(hour,min){
    ctx.save();  //      ，           。
    ctx.beginPath();
    ctx.lineWidth=6*rem;
    ctx.lineCap="round";
    ctx.strokeStyle="#222";
    ctx.rotate(2*Math.PI/12*(hour-3)+2*Math.PI/12/60*min);  //    3  
    ctx.moveTo(-15*rem,0);
    ctx.lineTo(r/2,0);
    ctx.stroke();
    ctx.restore();
}
//   
function drawMin(min){
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth=3*rem;
    ctx.lineCap="round";
    ctx.strokeStyle="#222";
    ctx.rotate(2*Math.PI/60*(min-15));  //    3  
    ctx.moveTo(-15*rem,0);
    ctx.lineTo(r/2+30*rem,0);
    ctx.stroke();
    ctx.restore();
}
//   
function drawSec(sec){
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle="#c14543";
    ctx.rotate(2*Math.PI/60*(sec-15));  //    3  
    ctx.moveTo(-15*rem,2*rem);
    ctx.lineTo(-15*rem,-2*rem);
    ctx.lineTo(r-8*rem,-1*rem);
    ctx.lineTo(r-8*rem,1*rem);
    ctx.fill();
    ctx.restore();
}
//    
function drawDot(){
    ctx.beginPath();
    ctx.fillStyle="#fff";
    ctx.arc(0,0,6*rem,0,2*Math.PI);
    ctx.fill();
}
//     
function draw(){
    ctx.clearRect(0,0,width,height); //        
    var date=new Date();
    var h=date.getHours();
    var m=date.getMinutes();
    var s=date.getSeconds();
    drawBg();
    drawScale();
    drawHour(h,m);
    drawMin(m);
    drawSec(s);
    drawDot();
    ctx.restore();
}
//   
var timer=setInterval(draw, 1000);
draw(); //     ，        。