无锡小程序开发_javascript canvas完成简易时钟例子

2021-01-05 11:14 admin
javascript canvas实现简易时钟例子       这篇文章主要为大家详细介绍了javascript canvas实现简易时钟例子,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了javascript canvas实现简易时钟的具体代码,供大家参考,具体内容如下

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 title 钟表 /title 
 script type="text/javascript" 
 window.onload=function(){
 //1.获取画布
 var canvas=document.getElementById("canvas");
 //2.获取上下文对象(获取画笔)
 var cx=canvas.getContext("2d");
 //3.设置画笔样式
 function clock(){
 cx.fill ;
 //4.绘制图形
 //绘制表盘
 cx.beginPath(); //绘制圆形
 cx.arc(300,300,200,0,Math.PI*2);//设置圆 arc(x,y,r,begin,end,c);x,y:圆的圆的圆心坐标 r:圆的半径 begin,end:开始角度和结束角度;Math.PI=180 Math.PI/180=1度 c:是否按照逆时针进行绘制true:按照逆时 false:顺时针
 cx.closePath();//关闭路径
 cx.fill();//
 //绘制时刻度
 cx.lineWidth=2;
 cx.stroke ;
 for(var i=0;i i++){
 cx.save();
 cx.translate(300,300);//形移
 cx.rotate(i*(Math.PI/6));
 cx.beginPath();
 cx.moveTo(0,-180);
 cx.lineTo(0,-200);
 cx.stroke();
 cx.closePath();
 cx.fill ;//绘制数字
 cx.font="16px blod";
 cx.rotate(Math.PI/6);
 cx.fillText(i+1,-6,-220);//文字
 cx.restore();
 //绘制分刻度
 for(var i=0;i i++){
 cx.save();
 cx.translate(300,300);
 cx.rotate(i*(Math.PI/30));
 cx.beginPath();
 cx.moveTo(0,-190);
 cx.lineTo(0,-200);
 cx.stroke();
 cx.closePath();
 cx.restore();
 //获取当前时间
 var today=new Date();
 var hour=today.getHours();
 var min=today.getMinutes();
 var sec=today.getSeconds();
 hour=hour+min/60;
 //绘制时针
 cx.lineWidth=4;
 cx.save();
 cx.translate(300,300);
 cx.beginPath();
 cx.rotate(hour*(Math.PI/6));//旋转
 cx.moveTo(0,10);
 cx.lineTo(0,-130);
 cx.closePath();
 cx.stroke();
 cx.restore(); //回滚
 //绘制分针
 cx.lineWidth=2;
 cx.save();
 cx.translate(300,300);
 cx.beginPath();
 cx.rotate(min*(Math.PI/30));
 cx.moveTo(0,10);
 cx.lineTo(0,-160);
 cx.closePath();
 cx.stroke();
 cx.restore(); //回滚
 //绘制秒针
 cx.lineWidth=1;
 cx.stroke ;
 cx.save();
 cx.translate(300,300);
 cx.beginPath();
 cx.rotate(sec*(Math.PI/30));
 cx.moveTo(0,10);
 cx.lineTo(0,-160);
 cx.closePath();
 cx.stroke();
 cx.restore(); 
 //绘制交叉处
 cx.fill ;
 cx.stroke ;
 cx.save();
 cx.translate(300,300);
 cx.beginPath();
 cx.beginPath();
 cx.arc(0,0,4,0,Math.PI*2);
 cx.closePath();
 cx.fill();
 cx.closePath();
 cx.stroke();
 cx.restore();
 setTimeout(clock,1000);
 // setInterval(clock,1000);
 clock();
 /script 
 /head 
 body 
 canvas id="canvas" width="1300px" height="600px" /canvas 
 /body 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。