前端canvas时钟学习成果

前端开发项目实战 前端开发项目论文 web前端开发项目经验描述

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>canvas clock</title>
    <style type=”text/css”>
        div {
            text-align: center;
            margin-top: 250px;
        }
    </style>
</head>
<body>
    <div>
        <canvas id=”clock” width=”300″ height=”300″>您的浏览器不支持canvas</canvas>
    </div>
    <script type=”text/javascript”>
        window.onload = function () {
            var c = document.getElementById(“clock”);
            var ctx = c.getContext(‘2d’);
            var width = ctx.canvas.width;
            var height = ctx.canvas.width;
            var r = width / 2;
            var rem = width / 200;
            function drawBackground() {
                ctx.save();
                ctx.translate(r, r);
                ctx.beginPath();
                ctx.lineWidth = 10 * rem;
                ctx.arc(0, 0, r – ctx.lineWidth / 2, 0, 2 * Math.PI);
                ctx.stroke();
                var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
                ctx.font = 18 * rem + “px Arial”;
                ctx.textAlign = “center”;
                ctx.textBaseline = “middle”;
                hourNumbers.forEach(function (number, i) {
                    var rad = 2 * Math.PI / 12 * i;
                    var x = Math.cos(rad) * (r – 30 * rem);
                    var y = Math.sin(rad) * (r – 30 * rem);
                    ctx.fillText(number, x, y);
                })
                for (var i = 0; i < 60; i++) {
                    var rad = 2 * Math.PI / 60 * i;
                    var x = Math.cos(rad) * (r – 15 * rem);
                    var y = Math.sin(rad) * (r – 15 * rem);
                    ctx.beginPath();
                    if (i % 5 == 0) {
                        ctx.fillStyle = ‘#000’;
                        ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI)
                    }
                    else {
                        ctx.fillStyle = ‘#ccc’;
                        ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI)
                    }
                    ctx.fill();
                }
            }
            function drawHour(hour, minute) {
                ctx.save();
                ctx.beginPath();
                var rad = 2 * Math.PI / 12 * hour;
                var mrad = 2 * Math.PI / 12 / 60 * minute;
                ctx.rotate(rad + mrad);
                ctx.lineWidth = 6 * rem;
                ctx.lineCap = ’round’;
                ctx.moveTo(0, 10 * rem);
                ctx.lineTo(0, -r / 2);
                ctx.stroke();
                ctx.restore()
            }
            function drawMinute(minute) {
                ctx.save();
                ctx.beginPath();
                var rad = 2 * Math.PI / 60 * minute;
                ctx.rotate(rad);
                ctx.lineWidth = 3 * rem;
                ctx.lineCap = ’round’;
                ctx.moveTo(0, 10 * rem);
                ctx.lineTo(0, -r + 35 * rem);
                ctx.stroke();
                ctx.restore()
            }
            function drawSecond(second) {
                ctx.save();
                ctx.beginPath();
                ctx.fillStyle = ‘#c14543’;
                var rad = 2 * Math.PI / 60 * second;
                ctx.rotate(rad);
                ctx.moveTo(-2 * rem, 20 * rem);
                ctx.lineTo(2 * rem, 20 * rem);
                ctx.lineTo(1, -r + 18 * rem);
                ctx.lineTo(-1, -r + 18 * rem);
                ctx.fill();
                ctx.restore()
            }
            function drawDot() {
                ctx.beginPath();
                ctx.fillStyle = ‘#fff’;
                ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI);
                ctx.fill();
            }
            function draw() {
                ctx.clearRect(0, 0, width, height)
                var now = new Date();
                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();
                drawBackground();
                drawHour(hour, minute);
                drawMinute(minute);
                drawSecond(second);
                drawDot();
                ctx.restore();
            }
            draw();
            setInterval(draw, 1000)
        }
    </script>
</body>
</html>

前端开发项目经验总结 1000元的前端开发项目 前端项目开发问题

» 本文来自:前端开发者 » 《前端canvas时钟学习成果》
» 本文链接地址:https://www.rokub.com/5739.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!