PHP前端开发

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

百变鹏仔 3个月前 (10-18) #H5教程

文章标签时钟

用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 variablesvar 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});

文章推荐

本站为非盈利性网站,不接受任何赞助和广告。

特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com

互联网ICP备案：陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客