キャンバス上にアニメーション時計を描画するサンプルコード-jsチュートリアル-php.cn

キャンバス上にアニメーション時計を描画するサンプルコード

巴扎黑

リリース： 2017-07-24 14:31:30

オリジナル

1578 人が閲覧しました

，今日は十分な時間であり、HTML5 の小さな例を、HTML5 を学習する準備ができている、または学習していない「子供向け」に示したいと思います。あなたの学習に役立ちます！なんてマスターなんだ！飛ばしてください！

MDN の例とは少し異なる、水を試して時計を描きました。自分で作ってますよ！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>Title</title>
</head><body onload="draw()">
<canvas id="canvas" width="300" height="300">
</canvas>
<script>
function init()
{
var ctx = document.getElementById('canvas').getContext('2d');

        ctx.save();
        ctx.clearRect(0,0,300,300);
        ctx.translate(150,150);
        ctx.lineWidth = 4;
        ctx.strokeStyle = "#a77";
        ctx.beginPath();
        ctx.arc(0,0,100,0,Math.PI*2,true);
        ctx.stroke();
        ctx.rotate(-Math.PI/2);//minute mark        ctx.save();for(var i = 0;i<60;i++){if(i%5 != 0){
                ctx.beginPath();
                ctx.moveTo(90,0);
                ctx.lineTo(94,0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI/30);        }
        ctx.restore();//hour mark        ctx.save();for(var i=1;i<=12;i++){
            ctx.beginPath();
            ctx.moveTo(85,0);
            ctx.lineTo(95,0);
            ctx.stroke();
            ctx.rotate(Math.PI/6);        }
        ctx.restore();
        window.requestAnimationFrame(clock);
    }function clock() {var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);var now = new Date();var sec = now.getSeconds();var min = now.getMinutes();var hr = now.getHours();
        hr = hr>=12 ? hr-12 : hr;

        ctx.beginPath();
        ctx.arc(0,0,82,0,Math.PI*2,false);
        ctx.clip();
        ctx.clearRect(-90,-90,180,180);//write hour        ctx.save();
        ctx.lineWidth = 6;
        ctx.rotate(hr*Math.PI/6 + min*Math.PI/360 + sec*Math.PI/21600);        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(50,0);
        ctx.stroke();
        ctx.restore();//write minute        ctx.save();
        ctx.lineWidth = 3;
        ctx.rotate(min*Math.PI/30 + sec*Math.PI/1800);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(65,0);
        ctx.stroke();
        ctx.restore();//write second        ctx.save();
        ctx.lineWidth = 1;
        ctx.rotate(sec*Math.PI/30);        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(80,0);
        ctx.stroke();
        ctx.restore();

        window.requestAnimationFrame(clock);
    }

    init();
    </script>
    </body>
    </html>

ログイン後にコピー

コードを表示

これは MDN のサンプルページです: Click me click me

MDN の例との違いは、MDN は毎回時計全体を再描画する必要があり、私のアプローチは個別であることです。時計の文字盤と 3 つの針を変更し、針を再描画するだけです。

ここには 2 つの困難があると思います。1 つは、時針と分針の角度を計算することです (分針が動くと、時針もある程度の角度で動きます)。 1 つは、ポインタが再描画される領域です。