第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

canvas元素———表盤

標(biāo)簽:
JavaScript

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <canvas id="wrap" width="800" height="800"></canvas>
</body>
<script type="text/javascript">
    var wrap = document.getElementById('wrap');
    var cxt = wrap.getContext("2d");
    var timer = null;
    //定义一个方法
    function setTime() {
        //画一个表盘
        cxt.clearRect(0, 0, wrap.width, wrap.height);
        cxt.beginPath();
        cxt.lineWidth = 10;
        cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
        cxt.strokeStyle = "#FF0000";
        cxt.fillStyle = "aqua";
        cxt.stroke();
        cxt.fill();
        //循环将12个粗刻度画到表盘中
        for(var i = 0; i < 12; i++) {
            cxt.beginPath();
            cxt.lineWidth = 10;
            cxt.moveTo(300, 300);
            cxt.lineTo(Math.cos((i * 30) / 180 * Math.PI) * 200 + 300, (-Math.sin((i * 30) / 180 * Math.PI) * 200 + 300));
            cxt.stroke();
        }
        //循环将60个秒刻度画到表盘中
        for(var i = 0; i < 60; i++) {
            cxt.beginPath();
            cxt.lineWidth = 2;
            cxt.moveTo(300, 300);
            cxt.lineTo(Math.cos((i * 6) / 180 * Math.PI) * 200 + 300, (-Math.sin((i * 6) / 180 * Math.PI) * 200 + 300));
            cxt.stroke();
        }
        //画一个小圆,将刻度线条覆盖
        cxt.beginPath();
        cxt.lineWidth = 10;
        cxt.arc(300, 300, 180, 0, 2 * Math.PI, false);
        cxt.strokeStyle = "#FF0000";
        cxt.fillStyle = "aqua";
        cxt.stroke();
        cxt.fill();
        //在表盘中写入数字
        cxt.beginPath();
        cxt.lineWidth = 2;
        var clg = cxt.createLinearGradient(500, 400, 1000, 600);
        clg.addColorStop(1, "red");
        cxt.fillStyle = clg;
        for(var i = 0; i < 12; i++) {
            cxt.font = " 16px Arial ";
            cxt.fillText(i + 1, Math.cos((i * 30 + 300) / 180 * Math.PI) * 150 + 300, (Math.sin((i * 30 + 300) / 180 * Math.PI) * 150 + 300));
        }
        cxt.stroke();
        //创建当前Date对象
        nowTime = new Date();
        hour = nowTime.getHours();
        minute = nowTime.getMinutes();
        second = nowTime.getSeconds();
        var hoursDeg, minutesDeg;
        //当前时,分,秒
        hourDeg = -90 + (360 / 60 * 5) / 60 * minute + (360 / 12 * hour);
        minuteDeg = -90 + (360 / 60 * minute) + ((360 / 60) / 60 * second);
        secondDeg = -90 + 360 / 60 * second;
        //在表盘上 时,分,秒针画圆
        cxt.beginPath();
        cxt.lineWidth = 10;
        cxt.strokeStyle = "red";
        cxt.moveTo(300, 300);
        cxt.arc(300, 300, 80, hourDeg * Math.PI / 180, hourDeg * Math.PI / 180, false);
        cxt.stroke();

        cxt.beginPath();
        cxt.lineWidth = 2;
        cxt.strokeStyle = "blueviolet";
        cxt.moveTo(300, 300);
        cxt.arc(300, 300, 200, secondDeg * Math.PI / 180, secondDeg * Math.PI / 180, false);
        cxt.stroke();

        cxt.beginPath();
        cxt.lineWidth = 5;
        cxt.strokeStyle = "blue";
        cxt.moveTo(300, 300);
        cxt.arc(300, 300, 150, minuteDeg * Math.PI / 180, minuteDeg * Math.PI / 180, false);
        cxt.stroke();
    }
    setTime();
    //定时器
    timer = setInterval(setTime, 1000);
</script>

</html>

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消