原 canvas绘制clock
之前看人做了，觉得蛮有意思的，自己也实现一个玩玩。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>钟表</title>
</head>
<style>
body{
background-color: black;
}
.wrap{
position: absolute;
background-color: silver;
left: 30%;
width: 40%;
}
</style>
<body>
<div class="wrap">
<canvas id="clock">your browser does not support the canvas tag </canvas>
</div>
</body>
<script>
var obj=document.getElementsByClassName('wrap')[0];
obj.style.height=obj.offsetWidth+'px';
obj.style.width=obj.offsetWidth+'px';
var len=obj.offsetWidth;
var canvas=document.getElementById('clock');
canvas.height=len;
canvas.width=len;
var ctx=canvas.getContext("2d");
canvas.globalCompositeOperation = 'source-atop';
var Clock={
Init:function(contain,canvas){
//画边沿
ctx.lineWidth = 3;
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.arc(len/2,len/2,len/2,0,2*Math.PI);
ctx.closePath();
ctx.stroke();
//画圆环
ctx.beginPath();
ctx.arc(len/2,len/2,len/2,0,2*Math.PI);
ctx.closePath();
ctx.fillStyle = 'rgba(0, 0, 255, 0.25)';
ctx.fill();
//画刻度
//分针
ctx.lineWidth = 1;
ctx.strokeStyle = 'green';
for(var i=0;i<60;i++){
var du=Math.PI*(i*6)/180;
var h=len/2-Math.cos(du)*(len/2);
var w=len/2+Math.sin(du)*(len/2);
var mh=len/2-Math.cos(du)*(len/2-10);
var mw=len/2+Math.sin(du)*(len/2-10);
ctx.beginPath();
ctx.moveTo(mw,mh);
ctx.lineTo(w,h);
ctx.stroke();
}
//时针
ctx.lineWidth = 3;
ctx.strokeStyle = 'pink'
for(var i=0;i<12;i++){
var du=Math.PI*(i*30)/180;
var h=len/2-Math.cos(du)*(len/2);
var w=len/2+Math.sin(du)*(len/2);
var mh=len/2-Math.cos(du)*(len/2-20);
var mw=len/2+Math.sin(du)*(len/2-20);
ctx.beginPath();
ctx.moveTo(mw,mh);
ctx.lineTo(w,h);
ctx.stroke();
}
//覆盖
ctx.beginPath();
ctx.arc(len/2,len/2,len/2-30,0,2*Math.PI);
ctx.closePath();
ctx.fillStyle = 'silver';
ctx.fill();
//装饰
ctx.drawImage(img,len/4,len/4,len/2,len/2);
//画中心点
ctx.beginPath();
ctx.arc(len/2,len/2,5,0,2*Math.PI);
ctx.closePath();
ctx.fillStyle = 'black';
ctx.fill();
},
DrawTime:function(){
var date=new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
//秒针位置
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
var secondDu=Math.PI*(second*6)/180;
var mh=len/2-Math.cos(secondDu)*(len/2-30);
var mw=len/2+Math.sin(secondDu)*(len/2-30);
ctx.beginPath();
ctx.moveTo(len/2,len/2);
ctx.lineTo(mw,mh);
ctx.stroke();
//分针位置
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
var minuteDu=Math.PI*(minute*6)/180;
mh=len/2-Math.cos(minuteDu)*(len/2-30);
mw=len/2+Math.sin(minuteDu)*(len/2-30);
ctx.beginPath();
ctx.moveTo(len/2,len/2);
ctx.lineTo(mw,mh);
ctx.stroke();
//时针位置
ctx.lineWidth = 3;
ctx.strokeStyle = 'black';
var hourDu=Math.PI*(minute/60*30+hour*30)/180;
mh=len/2-Math.cos(hourDu)*(len/2-30);
mw=len/2+Math.sin(hourDu)*(len/2-30);
ctx.beginPath();
ctx.moveTo(len/2,len/2);
ctx.lineTo(mw,mh);
ctx.stroke();
},
Clear:function(){
ctx.clearRect(0,0,len,len);
}
};
function render() {
Clock.Clear();
Clock.Init();
Clock.DrawTime();
requestAnimationFrame(render);
};
var img=new Image();
img.src="xy.png";
img.onload = function () //确保图片已经加载完毕
{
render();
};
</script>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
