使用html5的canvas和js来实现时钟效果

开发技术 2016/10/15

<canvas id="mycanvas" width="600" height="500" style="border: 1px solid #ccc; margin-top: 50px; margin-left: 300px;"></canvas>
<script>
clock();
run(); //加载页面时启动定时器
var interval; //定义一个定时器
function run() {
interval = setInterval(clock, "1000"); //定时的设置
}
function clock(){
x0 = 300;
y0 = 200; //表位置
r = 150; //表半径
var mycanvas = document.getElementById('mycanvas');
var t = mycanvas.getContext("2d");
mycanvas.height=mycanvas.height;
//画圆
t.beginPath();
t.strokeStyle = "#f00";
t.arc(x0,y0,r,0,2*Math.PI,true);
t.stroke();
t.closePath();

//画中心点
t.beginPath();
t.arc(x0,y0,8,0,2*Math.PI,true);
t.fillStyle="#f00";
t.fill();
t.closePath();

//画表盘
for(i=0;i<=60;i++){
t.beginPath();
t.strokeStyle="#f00";
if(i % 15 == 0){ //当0,3,6,9时加最粗
w0 = x0 + (r - 15) * Math.cos(i * 6 * Math.PI / 180);
h0 = y0 + (r - 15) * Math.sin(i * 6 * Math.PI / 180);
t.lineWidth = 5;
}else {
if (i % 5 == 0) { //每小时时加粗
w0 = x0 + (r - 10) * Math.cos(i * 6 * Math.PI / 180);
h0 = y0 + (r - 10) * Math.sin(i * 6 * Math.PI / 180);
t.lineWidth = 2;
} else { //其他时间
w0 = x0 + (r - 5) * Math.cos(i * 6 * Math.PI / 180);
h0 = y0 + (r - 5) * Math.sin(i * 6 * Math.PI / 180);
t.lineWidth = 1;
}
}
t.moveTo(w0,h0);
w1 = x0 + r * Math.cos(i*6*Math.PI/180);
h1 = y0 + r * Math.sin(i*6*Math.PI/180);
t.lineTo(w1,h1);
t.stroke();
t.closePath();
}

var d = new Date();
h = d.getHours();
m = d.getMinutes();
s = d.getSeconds();

//画时针
t.beginPath();
t.strokeStyle="#f00";
t.moveTo(x0,y0);
t.lineWidth = 8;
t1 = (h/12+m/60/12+s/60/60/12)*360-90;
w1 = x0 + 50*Math.cos(t1*Math.PI/180);
h1 = y0 + 50*Math.sin(t1*Math.PI/180);
t.lineTo(w1,h1);
t.stroke();
t.closePath();

//画分针
t.beginPath();
t.strokeStyle="#f00";
t.moveTo(x0,y0);
t.lineWidth = 5;
t1 = (m/60+s/60/60)*360-90;
w1 = x0 + 80*Math.cos(t1*Math.PI/180);
h1 = y0 + 80*Math.sin(t1*Math.PI/180);
t.lineTo(w1,h1);
t.stroke();
t.closePath();

//画秒针
t.beginPath();
t.strokeStyle="#f00";
t.moveTo(x0,y0);
t.lineWidth = 1;
t1 = (s/60)*360-90;
w1 = x0 + 120*Math.cos(t1*Math.PI/180);
h1 = y0 + 120*Math.sin(t1*Math.PI/180);
t.lineTo(w1,h1);
t.stroke();
t.closePath();
}
</script>

上一篇:JS和PHP判断访问终端是否是微信浏览器
下一篇:jQuery解决select下拉框中option的排序方法

中国· 上海

添加微信咨询

关键词

上海谷谷网络科技有限公司

办公室：上海市浦东新区郭守敬路351号

关于我们 | 联系我们

top
在线咨询
添加微信咨询