1. 程式人生 > >原生JS的<canvas>標簽畫時鐘

原生JS的<canvas>標簽畫時鐘

什麽 lock 坐標 clas width 設置 true drawing 指定

  首先要申明本人對於美除了美女真沒什麽要求。

  其次講講次學習碰到重要知識點:

  1、畫圓(弧):

    context.arc(x, y, radius, Math.PI / 180 * startAngle, Math.PI / 180 * endAngle, anticlockwise);     x:橫坐標;
    y:縱坐標;     radius:半徑;     startAngle:Math.PI / 180 這個在數學上表示1度,這邊需要用圓弧表示,所以需要多少就寫多少。表示弧線開始的角度。     endAngle:同理,表示弧線結束的角度。     anticlockwise:是否逆時針,true:逆時針,false:順時針。   2、context.moveTo(x, y):將起畫坐標移動到某個坐標上。如果不指定則從當前位置開始畫。   3、context.translate(x, y):將(x, y)這個坐標設置成(0,0);
  4、context.save():用於保存context的設置和變換,可以保存多個通過restore方法返回。可多次調用。   5、context.restore():用戶獲取保存的context設置和變換,可多次調用。 直接上代碼了:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Refresh" content="1" />
    <title>canvas draw clcok</title>
    <script>
        window.onload = function(){
            var drawing = document.getElementById("drawing");
            if(drawing.getContext){
                var context = drawing.getContext("2d");
                console.log(context);
                //邊框顏色
                context.fillStyle = "#999";
                //填充色 字體顏色
                context.strokeStyle = "#999";

                //畫圓心黑點
                context.beginPath();
                context.arc(100, 100, 5, 0, 2*Math.PI, false);
                context.fill();
                context.closePath();

                context.beginPath();
                context.arc(100, 100, 99, 0, 2*Math.PI, false);
                context.moveTo(194, 100);
                context.arc(100, 100, 94, 0, 2*Math.PI, false);
                
                context.font=‘bold 16px sans-serif‘;
                context.textAlign=‘center‘;
                context.textBaseline=‘middle‘;
               
                context.fillText("1", 145, 30);
                context.fillText("2", 170, 60);
                context.fillText("3", 185, 100);
                context.fillText("4", 170, 140);
                context.fillText("5", 145, 170);
                context.fillText("6", 100, 185);
                context.fillText("7", 55, 170);
                context.fillText("8", 30, 140);
                context.fillText("9", 15, 100);
                context.fillText("10", 30, 60);
                context.fillText("11", 55, 30);
                context.fillText("12", 100, 15);
                context.closePath();

                var nowDate = new Date();
                var hours = nowDate.getHours();
                if(hours > 12){
                    hours = hours - 12;
                }
                var mins = nowDate.getMinutes();
                var seconds = nowDate.getSeconds();

                console.log("hours : " + hours + ",mins : " + mins + ",seconds : " + seconds)

                context.translate(100, 100);
                context.moveTo(0, 0);
                context.save(); //用於保存context的設置和變換,可以保存多個通過restore方法返回。
                
                // 時針
                context.restore();
                context.save(); 
                context.rotate(Math.PI / 180 * 6 * hours );
                context.lineTo(0, -50);
                // 分針、
                context.restore();
                context.save(); 
                context.moveTo(0, 0);
                context.rotate(Math.PI / 180 * 6 * mins);
                context.lineTo(0, -60);

                // 秒針、
                context.restore();
                context.moveTo(0, 0);
                context.rotate(Math.PI / 180 * 6 * seconds);
                context.lineTo(0, -70);
                context.stroke();
            }
        }
    </script>
</head>
<body>
    <h2 style="text-align: center;color:#007ACC">clcok</h2>
    <div>
        <canvas id="drawing" width="500px" height="500px">

        </canvas>
    </div>
    
</body>
</html>

  

原生JS的<canvas>標簽畫時鐘