canvas時鐘

時間 2019-11-11
標籤 canvas 時鐘简体版
原文原文鏈接
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" width="500" height="500">您的瀏覽器不支持，請更新</canvas>
    <script>
        //繪製圖片：drawImage(image,dx,dy[,dWidth,dHeight]) 複製圖片：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
        //意思爲 把一張圖片image放到canvas中，座標是dx,dy控制圖片位置以canvas左上角爲座標原點，dw,dh控制圖片在canvas中顯示的大小，
        //sx和sy表明你要從哪開始裁剪圖片，sw和sh表明你要裁剪的那部分的大小
        //sx,sy,sWidth,sHeight在圖像中指定源矩形，dx,dy,dWidth,dHeight在畫布上指定目標矩形
        var c=document.getElementById("canvas");//獲取canvas元素
        var ctx=c.getContext("2d");//獲取渲染上下文
        function drawClock(){//建立函數
            ctx.clearRect(0,0,c.width,c.height);//clearRect在給定矩形內清空一個矩形，0，0清空起始點，後二者爲清空圖形長寬
            var now = new Date();//建立變量時分秒
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hour = now.getHours();
            hour += min/60;//60分小時加一
            hour-hour>12?hour-12:hour;//三元運算符，大於12減去12，小於則不變
            //錶盤
            ctx.lineWidth=10;//lineWidth 屬性設置或返回當前線條的寬度，以像素計
            ctx.strokeStyle="deepskyblue";//strokeStyle 屬性設置或返回用於筆觸的顏色、漸變或模式
            ctx.beginPath();//起始一條路徑，或重置當前路徑
            ctx.arc(250,250,200,0,360,false);//建立弧/曲線（用於建立圓形或部分圓）
            //arc(x,y,r,sAngle,eAngle,counterclockwise)
            //圓中心xy座標r爲半徑，sAngle,eAngle起始角結束角，counterclockwise可選規定應該逆時針(false)仍是順時針(true)繪圖。
            ctx.closePath();//建立從當前點回到起始點的路徑
            ctx.stroke();//繪製已定義的路徑。
            //刻度
            //1.時刻度
            for(var i=0;i<12;i++){
                ctx.save();//保存當前環境的狀態。
                //設置時針粗細
                ctx.lineWidth-7;
                ctx.strokeStyle="#000";//設置顏色
                //設置0，0點
                ctx.translate(250,250);//從新映射畫布上的(0,0)位置，即從250，250點爲起始點開始繪製，而不是畫布左上角的00點
                //旋轉角度
                ctx.rotate(i*30*Math.PI/180);//旋轉當前繪圖，旋轉i*30度，共繪製12個時針的刻度
                ctx.beginPath();//開始一條路徑，從位置0,-170。建立到達位置0,-190的一條線
                ctx.moveTo(0,-170);//以後就會隨着角度變化而繪製12個時針刻度
                ctx.lineTo(0,-190);//時針刻度寬7，長20
                ctx.closePath();
                ctx.stroke();
                ctx.restore();//返回以前保存過的路徑狀態和屬性
            }
            //分刻度
            for(var i=0;i<60;i++){//註釋同時針
                ctx.save();
                //分刻度粗細
                ctx.lineWidth-5;
                ctx.strokeStyle="orangered";
                //重置
                ctx.translate(250,250);
                //旋轉角度
                ctx.rotate(i*6*Math.PI/180);//旋轉6度的倍數
                //畫分刻度
                ctx.beginPath();
                ctx.moveTo(0,-180);//分針刻度寬5，長10
                ctx.lineTo(0,-190);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
            //時針指針
            ctx.save();
            ctx.lineWidth-7;
            ctx.strokeStyle="#000";
            //設置異次元空間0，0點
            ctx.translate(250,250);
            //設置角度
            ctx.rotate(hour*30*Math.PI/180);//旋轉角度小時*30
            ctx.beginPath();
            ctx.moveTo(0,-140);//寬度7長度150
            ctx.lineTo(0,10);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //分針
            ctx.save();
            ctx.lineWidth-5;
            ctx.strokeStyle="orangered";
            //重置
            ctx.translate(250,250);
            ctx.rotate(min*6*Math.PI/180);//旋轉角度分*6度
            ctx.beginPath();
            ctx.moveTo(0,-160);
            ctx.lineTo(0,15);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //秒針
            ctx.save();
            ctx.strokeStyle="orchid";
            ctx.lineWidth-3;
            //重置
            ctx.translate(250,250);
            ctx.rotate(sec*6*Math.PI/180);
            ctx.beginPath();
            ctx.moveTo(0,-170);
            ctx.lineTo(0,20);
            ctx.closePath();
            ctx.stroke();


            //設置時針，分針，秒針交叉點
            ctx.beginPath();
            ctx.arc(0,0,5,0,360,false);//半徑5的一個圓
            ctx.closePath();
            //填充樣式
            //設置筆觸樣式(秒針已設）
            ctx.stroke();
            ctx.fillStyle="wheat";
            ctx.fill();
            //設置秒針前段小點
            ctx.beginPath();
            ctx.arc(0,-150,5,0,360,false);//半徑5的一個圓
            ctx.closePath();
            ctx.stroke();
            ctx.fillStyle="wheat";
            ctx.fill();
            ctx.restore();
        }
        drawClock();//調用函數
        setInterval(drawClock,1000);//一秒走一次
    </script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。