canvas-八卦圖和時鐘實現

時間 2019-11-11

標籤 canvas 八卦時鐘實現简体版

原文原文鏈接

八卦圖：canvas

<body>
canvas id=" myCanvas" width=" 500" height= 」600"></canvas>
<script>
//獲取到畫布元素
let myCanvas = document.getElementById( "myCanvas );
//經過畫布元素獲取到上下文(畫筆)
let ctx = myCanvas.getContext("2d" );
//右邊白色的半圓
ctx.fillstyle =「#fff";
ctx.beginPath();
ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90);
ctx.fill();
//左邊黑色的圓
ctx.fillstyle = #000";
ctx.beginPath(); 
ctx.arc(300, 300, 100， (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);
ctx.fill();
//左邊白色的小圓
ctx.fillstyle = "#fff";
ctx.beginPath(); 
ctx.arc(300, 250，50, (Math.PI / 180) * 270, (Math.PI / 180) .90, true);
ctx.fill();
//右邊黑色的小圓
ctx.fillstyle =「#000」 ;
ctx.beginPath(); 
ctx.arc(300, 350, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90); 
ctx.fill();
//黑色的小圓點
ctx.fillstyle =「#000" ;
ctx.beginPath();
ctx.arc(300, 250， 5, 0, Math.PI * 2);
ctx.fill();
//白色的小圓點
ctx.fillstyle =「#fff";
ctx.beginPath(); 
ctx.arc(300, 350, 5, 0, Math.PI * 2);
ctx.fill();
</script>
</body>

時鐘：瀏覽器

<body>
    <canvas id="myCanvas" width="500" height="400">
        很抱歉,你的瀏覽器不支持canvas元素
    </canvas>
    <script>
        var c = document.getElementById('myCanvas');//獲取Canvas對象
        var ctx = c.getContext('2d');//獲取上下文
        function drawClock()
        {
            ctx.clearRect(0,0, c.width, c.height);//清除畫布
            c.width = c.width;//清除畫布時須要重置寬度,不然會有一個畫布的重疊
            var x = 250,y = 200,r = 180;//定義圓盤的中心座標和圓盤的半徑
            /*獲取實際的時間*/
            var objTime = new Date();
            var objHour = objTime.getHours();
            var objMin = objTime.getMinutes();
            var objSen = objTime.getSeconds();
            /*將時間轉換爲具體的弧度*/
            /*
             * 由於時鐘是從12點的位置算做開始,可是canvas是3點鐘的位置算做0度,因此-90度指向12點方向
             * 時針是每小時相隔30度,objMin/2是爲了作出當分針過半時,時針也相應的處於兩個小時之間
             * 分針和秒針是每次相隔6度
             */
            var arcHour = (-90+objHour*30 + objMin/2)*Math.PI/180;
            var arcMin = (-90+objMin*6)*Math.PI/180;
            var arcSen = (-90+objSen*6)*Math.PI/180;
            /*繪製圓盤*/
            ctx.beginPath();
            for(var i=0;i<60;i++)//一共360度,一共60分鐘,每分鐘相隔6度,360/6=60
            {
                ctx.moveTo(x,y);
                ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
            }
            ctx.closePath();
            ctx.stroke();
            /*繪製白盤蓋住下面的線*/
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);//半徑取值爲r的20分之19
            ctx.closePath();
            ctx.fill();
            /*依葫蘆畫瓢,製做每個小時的線*/
            /*繪製圓盤*/
            ctx.beginPath();
            ctx.lineWidth = 3;
            for(var i=0;i<12;i++)//一共360度,一共12個小時,每小時相隔30度,360/30=12
            {
                ctx.moveTo(x,y);
                ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
            }
            ctx.closePath();
            ctx.stroke();
            /*繪製白盤蓋住下面的線*/
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);//半徑取值爲r的20分之18
            ctx.closePath();
            ctx.fill();
            /*開始繪製時針分針和秒針,技巧就是起始弧度和結束弧度值同樣*/
            /*開始繪製時針*/
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.lineWidth = 7;
            ctx.lineCap = 'round';
            ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半徑取值爲r的20分之10
            ctx.stroke();
            ctx.closePath();
            /*開始繪製分針*/
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.lineWidth = 5;
            ctx.lineCap = 'round';
            ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半徑取值爲r的20分之12
            ctx.stroke();
            ctx.closePath();
            /*開始繪製秒針*/
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.lineWidth = 2;
            ctx.lineCap = 'round';
            ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半徑取值爲r的20分之16
            ctx.stroke();
            ctx.closePath();
        }
        setInterval('drawClock()',1000);//每隔1秒調用繪製時鐘函數
    </script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。