canvas實(shí)現(xiàn)動(dòng)畫時(shí)鐘
实现效果如下：
1.创建canvas元素
<canvas id="drawing" width="200" height="200">没有金刚钻就不要揽瓷器活</canvas>
2.绘制双圆
var drawing=document.getElementById("drawing");
if(drawing.getContext){
var context=drawing.getContext("2d");
context.beginPath();
//绘制外圆
context.arc(100,100,99,0,2*Math.PI,false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
context.closePath();
context.stroke();
}3.绘制刻度
//绘制刻度
context.font="bold 14px Arial";
context.textAlign="center";
context.textBaseline="midden";
for(var i=1;i<13;i++){
hous(100,105,85,i,context);
}
context.closePath();
context.stroke();function hous(x,y,r,h,context){
var gen3=Math.sqrt(3);
var rs=0.5*r;
switch(h)
{
case 1:
context.fillText("1",x+rs,y-rs*gen3);
break;
case 2:
context.fillText("2",x+gen3*rs,y-rs);
break;
case 3:
context.fillText("3",x+2*rs,y);
break;
case 4:
context.fillText("4",x+gen3*rs,y+rs);
break;
case 5:
context.fillText("5",x+rs,y+gen3*rs);
break;
case 6:
context.fillText("6",x,y+2*rs);
break;
case 7:
context.fillText("7",x-rs,y+gen3*rs);
break;
case 8:
context.fillText("8",x-gen3*rs,y+rs);
break;
case 9:
context.fillText("9",x-2*rs,y);
break;
case 10:
context.fillText("10",x-gen3*rs,y-rs);
break;
case 11:
context.fillText("11",x-rs,y-gen3*rs);
break;
case 12:
context.fillText("12",x,y-2*rs);
break;
default:
alert("请输入正确的时间刻度！");
}
}4.取得时间对象
var oDate = new Date(); //实例一个时间对象； var h=oDate.getHours(); //获取系统时， var m=oDate.getMinutes(); //分 var s=oDate.getSeconds(); //秒 m+=s/60; h+=m/60;
5.求得秒针与分针的坐标
function times(r,context,s){
context.moveTo(100,100);
var a=Math.PI*s/30;
var x=r*Math.sin(a)+100;
var y=100-r*Math.cos(a)
context.lineTo(x,y);
}秒针与分针绕时钟一圈分别为一分钟（60S）和一小时（60min），故而每s秒，秒针就转动了a=2π×s÷60弧度，再根据三角函数可以计算出其坐标了
6.求得时针的坐标
function timeh(r,context,h){
context.moveTo(100,100);
var a=Math.PI*h/6;
var x=r*Math.sin(a)+100;
var y=100-r*Math.cos(a)
context.lineTo(x,y);
}7.绘制指针
function time(context,r){
//描边路径
context.beginPath();
var oDate = new Date(); //实例一个时间对象；
var h=oDate.getHours(); //获取系统时，
var m=oDate.getMinutes(); //分
var s=oDate.getSeconds(); //秒
m+=s/60;
h+=m/60;
//绘制小圆
context.moveTo(103,100);
context.arc(100,100,3,0,2*Math.PI,false);
//绘制秒针
times(r,context,s);
// 绘制分针
times(r-15,context,m);
//绘制时针
timeh(r-30,context,h);
context.closePath();
context.stroke();
}8.动画调用
var r=94/Math.sqrt(2)-1;
setInterval(function(){
context.clearRect(100-r,100-r,2*r,2*r);
time(context,r-1);
},16.7);完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟表盘</title>
</head>
<body>
<canvas id="drawing" width="200" height="200">没有金刚钻就不要揽瓷器活</canvas>
<script type="text/javascript">
var drawing=document.getElementById("drawing");
if(drawing.getContext){
var context=drawing.getContext("2d");
context.beginPath();
//绘制外圆
context.arc(100,100,99,0,2*Math.PI,false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//绘制刻度
context.font="bold 14px Arial";
context.textAlign="center";
context.textBaseline="midden";
for(var i=1;i<13;i++){
hous(100,105,85,i,context);
}
context.closePath();
context.stroke();
var r=94/Math.sqrt(2)-1;
setInterval(function(){
context.clearRect(100-r,100-r,2*r,2*r);
time(context,r-1);
},16.7);
}
function hous(x,y,r,h,context){
var gen3=Math.sqrt(3);
var rs=0.5*r;
switch(h)
{
case 1:
context.fillText("1",x+rs,y-rs*gen3);
break;
case 2:
context.fillText("2",x+gen3*rs,y-rs);
break;
case 3:
context.fillText("3",x+2*rs,y);
break;
case 4:
context.fillText("4",x+gen3*rs,y+rs);
break;
case 5:
context.fillText("5",x+rs,y+gen3*rs);
break;
case 6:
context.fillText("6",x,y+2*rs);
break;
case 7:
context.fillText("7",x-rs,y+gen3*rs);
break;
case 8:
context.fillText("8",x-gen3*rs,y+rs);
break;
case 9:
context.fillText("9",x-2*rs,y);
break;
case 10:
context.fillText("10",x-gen3*rs,y-rs);
break;
case 11:
context.fillText("11",x-rs,y-gen3*rs);
break;
case 12:
context.fillText("12",x,y-2*rs);
break;
default:
alert("请输入正确的时间刻度！");
}
}
function times(r,context,s){
context.moveTo(100,100);
var a=Math.PI*s/30;
var x=r*Math.sin(a)+100;
var y=100-r*Math.cos(a)
context.lineTo(x,y);
}
function timeh(r,context,h){
context.moveTo(100,100);
var a=Math.PI*h/6;
var x=r*Math.sin(a)+100;
var y=100-r*Math.cos(a)
context.lineTo(x,y);
}
function time(context,r){
//描边路径
context.beginPath();
var oDate = new Date(); //实例一个时间对象；
var h=oDate.getHours(); //获取系统时，
var m=oDate.getMinutes(); //分
var s=oDate.getSeconds(); //秒
m+=s/60;
h+=m/60;
//绘制小圆
context.moveTo(103,100);
context.arc(100,100,3,0,2*Math.PI,false);
//绘制秒针
times(r,context,s);
// 绘制分针
times(r-15,context,m);
//绘制时针
timeh(r-30,context,h);
context.closePath();
context.stroke();
}
</script>
</body>
</html>點(diǎn)擊查看更多內(nèi)容
1人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦