Flask接口签名sign原理与实例代码浅析
161
2023-06-14
canvas实现钟表效果
效果如下:
代码如下:
OdAcYl
body{
background: #fc0;
}
#canvas1{
background: #fff;
}
var oC=document.getElementById('canvas1');
var oGC=oC.getContext('2d');
function toDraw(){
var x=200;
var y=200;
var r=150;
oGC.clearRect(0,0,oC.width,oC.height);
var oDate=new Date();
var oHour=oDate.getHours();
var oMinu=oDate.getMinutes();
var oSec=oDate.getSeconds();
var hVal=(-90+oHour*30+oMinu/2)*Math.PI/180;
var mVal=(-90+oMinu*6)*Math.PI/180;
var sVal=(-90+oSec*6)*Math.PI/180;
oGC.beginPath();
for(i=0;i<60;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle='#fff';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth=3;
oGC.beginPath();
for(i=0;i<12;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle='#fff';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth=5;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*10/20,hVal,hVal,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth=3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*14/20,mVal,mVal,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth=1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*17/20,sVal,sVal,false);
oGC.closePath();
oGC.stroke();
}
setInterval(toDraw,1000);
toDraw();
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~