自己做个时钟-html5的canvas

来源：互联网发布：荣威rx5网络连接异常编辑：程序博客网时间：2024/04/30 14:21

这个只是用来练习对html5的掌握程度的。

首先，时钟有一个表盘。

表盘包括框、刻度2个

框就是一个圆，刻度是一个一个小的线段

圆用arc函数可以画出来，刻度只能通过画圆弧来表现。然后用另外一个小的圆把多余的线遮掉

同理，指针也可以这样来完成，通过一个角度为0的圆弧。

然后计算当前时间，通过判断时间来得到角度。

代码如下：

 var canvas = null;    var content = null;    window.onload = function () {        canvas = document.getElementById("canv");        content = canvas.getContext("2d");                setInterval("setTime()", 1000);    }    function setTime() {        var times = new Date();        var ohour = times.getHours();        var omin = times.getMinutes();        var osen = times.getSeconds();        content.clearRect(0, 0, 1000, 760);        content.save();        content.beginPath();        content.arc(500, 350, 330, 0, 360 * Math.PI / 180, false);        content.closePath();        content.stroke();        for (var i = 0; i < 60; i++) {            content.beginPath();            content.moveTo(500, 350);            content.arc(500, 350, 330, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);            content.closePath();            content.stroke();        }        content.fillStyle = "#eee";        content.beginPath();        content.arc(500, 350, 330 * 19 / 20, 0, 360 * Math.PI / 180, false);        content.closePath();        content.fill();        for (var i = 0; i < 12; i++) {            content.beginPath();            content.moveTo(500, 350);            content.arc(500, 350, 330, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);            content.closePath();            content.stroke();        }        content.fillStyle = "#eee";        content.beginPath();        content.arc(500, 350, 330 * 18 / 20, 0, 360 * Math.PI / 180, false);        content.closePath();        content.fill();        var hourvalue = (ohour * 30 - 90 + omin / 12) * Math.PI / 180;        var minvalue = (omin * 6 - 90) * Math.PI / 180;        var senvalue = (osen * 6 - 90) * Math.PI / 180;        content.lineWidth = 4;        content.beginPath();        content.moveTo(500, 350);        content.arc(500, 350, 330 * 12 / 20, hourvalue, hourvalue, false);        content.closePath();        content.stroke();        content.lineWidth = 3;        content.beginPath();        content.moveTo(500, 350);        content.arc(500, 350, 330 * 15 / 20, minvalue, minvalue, false);        content.closePath();        content.stroke();        content.lineWidth = 2;        content.beginPath();        content.moveTo(500, 350);        content.arc(500, 350, 330 * 17 / 20, senvalue, senvalue, false);        content.closePath();        content.stroke();        content.textBaseline = "top";        content.fillStyle = "#333";        content.font = "16px 微软雅黑";        content.fillText(ohour + "：" + omin + "：" + osen, 470, 710);        content.restore();        //console.log(ohour + "：" + omin + "：" + osen);    }

0 0