canvas元素———表盘-原创手记-慕课网

<!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>