Html5 - canvas - &nbs

發(fā)布時間：2020-07-12 03:33:06 來源：網(wǎng)絡(luò) 閱讀：322 作者：lianhuayu420 欄目：移動開發(fā)
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <canvas id="clock" width="500" height="500"></canvas>
        
        <script>
            var clock = document.getElementById("clock");
            var ctx = clock.getContext("2d");
            
            function drawClock(){
            
            //清除畫布
            ctx.clearRect(0,0,500,500);
            var now = new Date();
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hour = now.getHours(); // 小時必須獲取浮點類型
            hour = hour + min/60 ;
            //將二十四小時進制轉(zhuǎn)換為12小時進制
            if(hour > 12){
                hour -= 12 ;
            }
            
            
            
            // 表盤
            ctx.lineWidth = 10 ;
            ctx.strokeStyle = "blue"
            ctx.beginPath();
            
            ctx.arc(250,250,200,0,360,false);
            ctx.closePath();
            ctx.stroke();
            // 刻度 時刻度
            for(var i=0; i<12; i++){
                ctx.save();
                ctx.lineWidth = 7 ;
                ctx.strokeStyle= "#000";
                ctx.translate(250,250) ; // 設(shè)置旋轉(zhuǎn)圓點
                ctx.rotate(i*30*Math.PI/180); //設(shè)置旋轉(zhuǎn)角度   : 角度*Math.PI/180 = 弧度
                ctx.beginPath();
                ctx.moveTo(0,-170);
                ctx.lineTo(0,-190);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
            // 分刻度
            for(var i=0;i<60;i++){
            
                ctx.save();
                ctx.lineWidth= 5 ;
                ctx.strokeStyle = "#000" ;
                ctx.translate(250,250);
                ctx.rotate(i*6*Math.PI/180);
                ctx.beginPath();
                ctx.moveTo(0,-180);
                ctx.lineTo(0,-190);
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }
            // 時針
            ctx.save();
            ctx.lineWidth = 7 ;
            ctx.strokeStyle = "#000";
            ctx.translate(250,250); //設(shè)置異次元空間的0,0點
            ctx.rotate(hour*30*Math.PI/180);
            ctx.beginPath();
            ctx.moveTo(0,-140);
            ctx.lineTo(0,10);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //分針
            ctx.save();
            ctx.lineWidth = 5 ;
            ctx.strokeStyle = "#000";
            ctx.translate(250,250); //設(shè)置異次元空間的0,0點
            ctx.rotate(min*6*Math.PI/180);
            ctx.beginPath();
            ctx.moveTo(0,-160);
            ctx.lineTo(0,15);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //秒針
            ctx.save();
            ctx.lineWidth = 3 ;
            ctx.strokeStyle = "#F00";
            ctx.translate(250,250); //設(shè)置異次元空間的0,0點
            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);
            ctx.closePath();
            ctx.fillStyle="grey";
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0,-150,5,0,360,false);
            ctx.closePath();
            ctx.fillStyle="grey";
            ctx.fill();
            ctx.stroke();
            ctx.restore();
        }
        drawClock();
        setInterval(drawClock,1000);
        </script>
    </body>
</html>
向AI問一下細節(jié)
Html5 - canvas - &nbs

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽
