首页 > 文章 > web前端 > 介绍一个用HTML5 Canvas 制作的时钟

介绍一个用HTML5 Canvas 制作的时钟

零下一度原创: 2017-04-26 15:55:382209浏览

用HTML5 Canvas 制作的时钟，看着挺简单的，但其中写起来还是有很多小的问题的，感兴趣的小伙伴们可以参考一下

代码如下：

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 时钟</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <style>
        .clocks {
          height: 500px;
          margin: 25px auto;
          position: relative;
          width: 500px;
        }
      </style>
    </head>
    <body>
        <header>
            <h2>HTML5 时钟</h2>
        </header>
        <p class="clocks">
            <canvas id="canvas" width="500" height="500"></canvas>
        </p>
    </body>
</html>

[JavaScript]代码

// inner variables
var canvas, ctx;
var clockRadius = 250;
var clockImage;

// draw functions :
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    // get current time
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // save current context
    ctx.save();

    // draw clock image (as background)
    ctx.drawImage(clockImage, 0, 0, 500, 500);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    // draw numbers
    ctx.font = &#39;36px Arial&#39;;
    ctx.fillStyle = &#39;#000&#39;;
    ctx.textAlign = &#39;center&#39;;
    ctx.textBaseline = &#39;middle&#39;;
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }

    // draw hour
    ctx.save();
    var theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.5, 1);
    ctx.lineTo(clockRadius * 0.5, -1);
    ctx.fill();
    ctx.restore();

    // draw minute
    ctx.save();
    var theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fill();
    ctx.restore();

    // draw second
    ctx.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.9, 1);
    ctx.lineTo(clockRadius * 0.9, -1);
    ctx.fillStyle = &#39;#0f0&#39;;
    ctx.fill();
    ctx.restore();

    ctx.restore();
}
// initialization
$(function(){
    canvas = document.getElementById(&#39;canvas&#39;);
    ctx = canvas.getContext(&#39;2d&#39;);

    // var width = canvas.width;
    // var height = canvas.height;

clockImage = new Image();
clockImage.src = &#39;http://static.oschina.net/uploads/space/2012/0712/125855_nnla_89964.png&#39;;

    setInterval(drawScene, 1000); // loop drawScene
});

以上是介绍一个用HTML5 Canvas 制作的时钟的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：分享一个简单的HTML5 视频嵌入实例代码下一篇：什么是响应式网站设计？

查看更多