利用HTML5的Canvas绘制时钟

作者: 清枫_小天 | 来源:发表于2016-06-23 22:56 被阅读145次

利用HTML5的Canvas绘制时钟
HTML5 canvas绘图
JavaScript-Html-绘制时钟
Canvas基础及动态时钟的实现
用canvas绘制一场蓝色大雨
HTML5 - Canvas
Canvas绘制出一个时钟
canvas 入门
canvas绘制时钟
canvas绘制时钟

http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="Canvas" width="800" height="800"></canvas>
<script type="text/javascript">
    window.onload = draw;
    function draw() {
        var canvas = document.getElementById("Canvas");
        var context = canvas.getContext("2d");
        context.save(); 
        context.translate(200, 200);
        var deg = 2 * Math.PI / 12;
        //表盘
        context.save();
        context.beginPath();
        context.arc(0, 0, 150, 0, 2 * Math.PI, false);

        context.fillStyle = "blue";
        context.fill();
        context.closePath();
        context.restore();
        //数字
        context.save();
        context.beginPath();
        for (var i = 1; i < 13; i++) {
            var x1 = Math.sin(i * deg);
            var y1 = -Math.cos(i * deg);
            context.fillStyle = "#fff";
            context.font = "bold 20px Calibri";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText(i, x1 * 120, y1 * 120);
        }
        context.closePath();
        context.restore();
        //new Date
        var time = new Date();
        var h = (time.getHours() % 12) * 2 * Math.PI / 12;
        var m = time.getMinutes() * 2 * Math.PI / 60;
        var s = time.getSeconds() * 2 * Math.PI / 60;

        //时针
        context.save();
        context.rotate(h + m / 12 + s / 720);
        context.beginPath();
        context.moveTo(0, 6);
        context.lineTo(0, -85);
        context.strokeStyle = "#fff";
        context.lineWidth = 6;
        context.stroke();
        context.closePath();
        context.restore();
        //分针
        context.save();
        context.rotate(m + s / 60);
        context.beginPath();
        context.moveTo(0, 8);
        context.lineTo(0, -105);
        context.strokeStyle = "#fff";
        context.lineWidth = 4;
        context.stroke();
        context.closePath();
        context.restore();
        //秒针
        context.save();
        context.rotate(s);
        context.beginPath();
        context.moveTo(0, 10);
        context.lineTo(0, -120);
        context.strokeStyle = "#fff";
        context.lineWidth = 2;
        context.stroke();
        context.closePath();
        context.restore();
        context.restore();
        setTimeout(draw, 1000);

    }
</script>
</body>
</html>

下载 (1).jpg