Flask接口签名sign原理与实例代码浅析
195
2023-06-16
canvas绘制表盘时钟
话不多说,请看代码:
您的浏览器不支持canvas
var box = document.getElementById('box');
var cxt = box.getContext('2d');
// 时钟动起来
var timer = null;
function clock(){
var date = new Date();
var h = date.getHours();
h = h + h/60;
h = h>12? h-12:h;
var m = date.getMinutes();
var s = date.getSeconds();
// 清画布
cxt.clearRect(0,0,500,500);
// 画表盘
cxt.strokeStyle = '#f0f';
cxt.lineWidth = 6;
cxt.beginPath();
cxt.arc(250,250,100,0,2*Math.PI);
xeuSMXDS cxt.stroke();
// 画时钟刻度
for(var i=0; i<12; i++){
cxt.save();
cxt.translate(250,250);
cxt.rotate(30*i*Math.PI/180);
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(0,-80);
cxt.lineTo(0,-92);
cxt.stroke();
cxt.restore();
}
//画分钟刻度
for(var i=0; i<60; i++){
cxt.save();
cxt.translate(250,250);
cxt.rotate(6*i*Math.PI/180);
cxt.lineWidth = 2;
cxt.beginPath();
cxt.moveTo(0,-86);
cxt.lineTo(0,-92);
cxt.stroke();
cxt.restore();
}
// 画时针
cxt.save();
cxt.lineWidth = 5;
cxt.translate(250,250);
cxt.rotate(h*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,6);
cxt.lineTo(0,-40);
cxt.stroke();
cxt.restore();
// 画分针
cxt.save();
cxt.lineWidth = 3;
cxt.translate(250,250);
cxhttp://t.rotate(m*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,8);
cxt.lineTo(0,-60);
cxt.stroke();
cxt.restore();
// 画秒针
cxt.save();
cxt.lineWidth = 1;
cxt.translate(250,250);
cxt.rotate(s*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,10);
cxt.lineTo(0,-75);
cxt.stroke();
cxt.restore();
// 画中心的小圆固定三根针
cxt.save();
cxt.beginPath();
cxt.fillStyle = '#0f0';
cxt.lineWidth = 2;
cxt.translate(250,250);
cxt.arc(0,0,2,0,360,false);
cxt.stroke();
cxt.fill();
cxt.restore();
// 画秒针上的园
cxt.save();
cxt.fillStyle = '#f00';
cxt.lineWidth = 2;
cxt.translate(250,250);
cxt.rotate(s*6*Math.PI/18http://0);
cxt.beginPath();
cxt.arc(0,-60,2,0,360,false);
cxt.stroke();
cxt.fill();
cxt.restore();
}
clock();
timer = setInterval(clock,1000);
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~