html5绘制时钟动画
建站知识 2021-07-02 23:00www.168986.cn长沙网站建设
<canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas>
复制代码
代码如下:var clock=document.getElementById("clock");
var cxt=clock.getContext("2d");
function drawNow(){
var now=new Date();
var hour=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
hour=hour>12?hour-12:hour;
hour=hour+min/60;
//表盘(蓝色)
cxt.lineWidth=10;
cxt.strokeStyle="blue"
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.stroke();
//刻度
//时刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle="black";
cxt.translate(250,250);
cxt.rotate(i30Math.PI/180);//旋转角度 角度Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
cxt.save();
//设置分刻度的粗细
cxt.lineWidth=5;
//重置画布原点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i6Math.PI/180);
//画分针刻度
cxt.strokeStyle="black";
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
// 设置时针风格
cxt.lineWidth=7;
cxt.strokeStyle="black";
cxt.translate(250,250);
cxt.rotate(hour30Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="black";
//设置异次元空间分针画布的中心
cxt.translate(250,250);
cxt.rotate(min6Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke()
cxt.restore();
//秒针
cxt.save();
//设置秒针的风格
//颜色:红色
cxt.strokeStyle="red";
cxt.lineWidth=3;
//重置原点
cxt.translate(250,250);
//设置角度
//cxt.rotate(330Math.PI/180);
cxt.rotate(sec6Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//画出时针,分针,秒针的交叉点
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
//设置填充
cxt.fillStyle="gray";
cxt.fill();
//cxt.strokeStyle="red";
cxt.stroke();
//画出秒针的小圆点
cxt.beginPath();
cxt.arc(0,-140,5,0,360,false);
cxt.closePath();
//设置填充
cxt.fillStyle="gray";
cxt.fill();
//cxt.strokeStyle="red";
cxt.stroke();</p> <p> cxt.restore();</p> <p>}
function drawClock(){
cxt.clearRect(0,0,500,500);
drawNow();
}
drawNow();
setInterval(drawClock,1000);
上一篇:html5使用canvas画一条线
下一篇:html5的canvas方法使用指南
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML