var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(X坐標, Y坐標, 半徑, 0, 2 * Math.PI, false);
ctx.strokeStyle = 隨便填顏色;
ctx.stroke();
ctx.closePath();

接下來我們要打上時間刻度，可是問題來了：你是可以畫出來一個圓，也知道每個刻度6°角，可如何在畫出來的圓上找到對應的坐標呢？

don't worry（數(shù)學知識過關的小伙伴們表示毫無壓力）~我們只需要去算出正余弦就拿到了對應的XY坐標啦（是的，腳本內正余弦算法不是算角度），具體做法如下：

//計算圓上每個點的坐標
///[a]角度[i]刻度[ox]圓心X坐標[oy]圓心Y坐標[or]圓半徑
function angle(a, i, ox, oy, or) {
    var hudu = (2 * Math.PI / 360) * a * i;//求出弧度
    var x = ox + Math.sin(hudu) * or;//計算出x軸坐標for正弦
    var y = oy - Math.cos(hudu) * or;//計算出y軸坐標for余弦
    return x + '_' + y;
}

到了這里，我們就可以愉快的畫刻度了：

//打上文字（僅小時）
for (var i = 0; i < 12; i++) {
    var textXY = angle(30, i + 1, ox, oy, or - 10);//小時刻度坐標
    ctx.fillText(i + 1, textXY.split('_')[0], textXY.split('_')[1]);
    ctx.textAlign = 'center';//水平居中
    ctx.textBaseline = 'middle';//垂直居中
}
 
//打上分秒鐘刻度
for (var i = 0; i < 60; i++) {
    var oXY = angle(6, i + 1, ox, oy, or);//分、秒刻度坐標
    ctx.beginPath();
    ctx.arc(oXY.split('_')[0], oXY.split('_')[1], (i + 1) % 5 == 0 ? 2 : 1, 0, 2 * Math.PI);
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.closePath();
}

為了逼真，我還加入了秒針影響分針，分針影響秒針的計算。（見最后代碼）

然后就是考慮三根針不一樣長的問題，這個問題試過很多遍，最后我發(fā)現(xiàn)最簡單的解決辦法就是多畫3個圓，因為偏移的角度計算方式是一樣的。

最后的結果是這樣的：

因為不支持上傳html文件，所以我就把所有代碼貼在這里了：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>小馬的canvas練手作品-時鐘</title>
    <meta charset="utf-8" />
</head>
<body>
    <canvas id="myCanvas" width="1000" height="1000">您的瀏覽器不支持此標簽</canvas>
    <script type="text/javascript">
 
        setInterval('drawClock(150, 150, 100, 50, 70, 90,"pink","black","red","green")', 1000);
 
        //畫鐘表
        //[ox]圓心X坐標[oy]圓心Y坐標[or]鐘表半徑[hr]時針半徑[mr]分針半徑[sr]秒針半徑[oc]鐘表外環(huán)顏色[hc]時針顏色[mc]分針顏色[sc]秒針顏色
        function drawClock(ox, oy, or, hr, mr, sr, oc, hc, mc, sc) {
 
            //時鐘底盤
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
            ctx.clearRect(ox - or, oy - or, or * 2, or * 2);//清空上一次繪制
            ctx.beginPath();
            ctx.arc(ox, oy, or, 0, 2 * Math.PI, false);
            ctx.strokeStyle = oc;
            ctx.stroke();
            ctx.closePath();
 
            //獲取當前時間
            var NowTime = new Date();
            var h = NowTime.getHours();
            var m = NowTime.getMinutes();
            var s = NowTime.getSeconds();
            var y = NowTime.getFullYear();
            var mo = NowTime.getMonth() + 1;
            var d = NowTime.getDate();
            ctx.fillText(mo + '月' + d + '日', ox, oy - or / 2, 50);//顯示月日
 
            //打上時間刻度
            for (var i = 0; i < 12; i++) {
                var textXY = angle(30, i + 1, ox, oy, or - 10);//小時刻度坐標
                ctx.fillText(i + 1, textXY.split('_')[0], textXY.split('_')[1]);
                ctx.textAlign = 'center';//水平居中
                ctx.textBaseline = 'middle';//垂直居中
            }
 
            //打上分鐘刻度
            for (var i = 0; i < 60; i++) {
                var oXY = angle(6, i + 1, ox, oy, or);//分、秒刻度坐標
                ctx.beginPath();
                ctx.arc(oXY.split('_')[0], oXY.split('_')[1], (i + 1) % 5 == 0 ? 2 : 1, 0, 2 * Math.PI);
                ctx.fillStyle = 'blue';
                ctx.fill();
                ctx.closePath();
            }
 
            h = h + m / 60;//分鐘影響時針偏移
 
            var hoursXY = angle(30, h > 12 ? h - 12 : h, ox, oy, hr);//時針終點XY坐標
            drawLine(ctx, hc, ox, oy, hoursXY.split('_')[0], hoursXY.split('_')[1]);
 
            m = m + s / 60;//秒鐘影響分針偏移
 
            var minuteXY = angle(6, m, ox, oy, mr);//分針終點XY坐標
            drawLine(ctx, mc, ox, oy, minuteXY.split('_')[0], minuteXY.split('_')[1]);
 
            var secondXY = angle(6, s, ox, oy, sr);//秒針終點XY坐標
            drawLine(ctx, sc, ox, oy, secondXY.split('_')[0], secondXY.split('_')[1]);
 
        }
 
        //計算圓上每個點的坐標
        ///[a]角度[i]刻度[ox]圓心X坐標[oy]圓心Y坐標[or]圓半徑
        function angle(a, i, ox, oy, or) {
            var hudu = (2 * Math.PI / 360) * a * i;//求出弧度
            var x = ox + Math.sin(hudu) * or;//計算出x軸坐標for正弦
            var y = oy - Math.cos(hudu) * or;//計算出y軸坐標for余弦
            return x + '_' + y;
        }
 
        //畫線方法
        ///[ob]繪畫對象[ox]圓心X坐標[oy]圓心Y坐標[px]目標X坐標[py]目標Y坐標
        function drawLine(ob, color, ox, oy, px, py) {
            ob.beginPath();
            ob.strokeStyle = color;
            ob.moveTo(ox, oy);
            ob.lineTo(px, py);
            ob.stroke();
            ob.closePath();
        }<br data-filtered="filtered">
    </script>
</body>
</html>

到此這篇關于JS在Canvas元素內繪制鐘表的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: