使用canvas元素绘制指针式动画时钟
来源:互联网 发布:淘宝家具排行 编辑:程序博客网 时间:2024/05/16 09:40
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>使用canvas元素绘制指针式动画时钟</title> <script type="text/javascript">var canvas;var context;//页面装载function window_onload(){ canvas=document.getElementById("canvas");//获取canvas元素 context=canvas.getContext('2d');//获取canvas元素的图形上下文对象 setInterval("draw()",1000);//每隔一秒重绘时钟,重新显示时间}//绘制时钟function draw(){ var radius=Math.min(canvas.width / 2, canvas.height / 2) -25;//时钟罗盘半径 var centerx=canvas.width/2;//时钟中心横坐标 var centery=canvas.height/2;//时钟中心纵坐标 context.clearRect(0,0,canvas.width,canvas.height);//擦除之前所绘时钟 context.save();//保存当前绘制状态 //绘制时钟圆盘 context.fillStyle = '#efefef';//时钟背景色 context.strokeStyle = '#c0c0c0';//时钟边框颜色 context.beginPath();//开始创建路径 context.arc(centerx,centery,radius, 0,Math.PI*2, 0);//创建圆形罗盘路径 context.fill();//用背景色填充罗盘 context.stroke();//用边框颜色绘制罗盘边框 context.closePath();//关闭路径 context.restore();//恢复之前保存的绘制状态 //绘制时钟上表示小时的文字 var r = radius - 10;//缩小半径,因为要将文字绘制在时钟内部 context.font= 'bold 16px 宋体';//指定文字字体 Drawtext('1', centerx + (0.5 * r), centery - (0.88 * r)); Drawtext('2', centerx + (0.866 * r), centery - (0.5 * r)); Drawtext('3', centerx + radius - 10,centery); Drawtext('4', centerx + (0.866 * r), centery + (0.5 * r)); Drawtext('5', centerx + (0.5 * r), centery + (0.866 * r)); Drawtext('6', centerx, centery + r); Drawtext('7', centerx - (0.5 * r), centery + (0.866 * r)); Drawtext('8', centerx - (0.866 * r), centery + (0.49 * r)); Drawtext('9', centerx - radius + 10, centery); Drawtext('10',centerx - (0.866 * r),centery - (0.50 * r)); Drawtext('11', centerx - (0.51 * r), centery - (0.88 * r)); Drawtext('12', centerx, 35); //绘制时钟指针 var date=new Date();//获取需要表示的时间 var h = date.getHours();//获取当前小时 var m = date.getMinutes();//获取当前分钟 var s=date.getSeconds();//获取当前秒 var a = ((h/12) *Math.PI*2) - 1.57 + ((m / 60) * 0.524);//根据当前时间计算指针角度 context.save();//保存当前绘制状态 context.fillStyle='black'; //指定指针中心点的颜色 context.beginPath();//开始创建路径 context.arc(centerx,centery,3,0,Math.PI * 2, 0);//创建指针中心点的路径 context.closePath();//关闭路径 context.fill();//填充指针中心点 context.lineWidth=3;//指定指针宽度 context.fillStyle='darkgray';//指定指针填充颜色 context.strokeStyle='darkgray';//指定指针边框颜色 context.beginPath();//开始创建路径 //绘制小时指针 context.arc(centerx,centery,radius - 55, a + 0.01, a, 1); context.lineTo(centerx,centery); //绘制分钟指针 context.arc(centerx,centery,radius - 40, ((m/60) * 6.27) - 1.57, ((m/60) * 6.28) - 1.57, 0); context.lineTo(canvas.width / 2, canvas.height / 2); //绘制秒钟指针 context.arc(centerx,centery,radius - 30, ((s/60) * 6.27) - 1.57, ((s/60) * 6.28) - 1.57, 0); context.lineTo(centerx,centery); context.closePath();//关闭路径 context.fill();//填充指针 context.stroke();//绘制指针边框 context.restore();//恢复之前保存的绘制状态 //指定时钟下部当前时间所用的字符串,文字格式为hh:mm:dd var hours = String(h); var minutes = String(m); var seconds = String(s); if (hours.length == 1) h = '0' + h; if (minutes.length == 1) m = '0' + m; if (seconds.length == 1) s = '0' + s; var str =h + ':' + m + ':' +s; //绘制时钟下部的当前时间 Drawtext(str, centerx, centery + radius + 12);}function Drawtext(text, x, y){ //因为需要使用到坐标平移,所以在平移前线保存当前绘制状态 context.save(); x -= (context.measureText(text).width / 2);//文字起点横坐标 y +=9;//文字起点纵坐标 context.beginPath();//开始创建路径 context.translate(x, y);//平移坐标 context.fillText(text,0,0);//填充文字 context.restore();}</script> <style>div{ display: -moz-box; display: -webkit-box; -moz-box-pack: center; -webkit-box-pack: center; width:100%;}canvas{ background-color:white;}</style> </head> <body onload="window_onload()"> <div><h1>使用canvas元素绘制指针式动画时钟</h1></div><div><canvas id="canvas" width="200px" height="200px"></canvas></div> //这里就是你的时钟的位置。</body> </html>
阅读全文
0 0
- 使用canvas元素绘制指针式动画时钟
- 使用canvas绘制时钟
- 使用canvas绘制时钟
- 使用canvas绘制时钟
- 使用canvas 绘制时钟
- 使用canvas绘制一个时钟
- 使用canvas绘制动态时钟
- 使用canvas绘制风景时钟
- 使用Canvas绘制旋转动画
- 使用CANVAS绘制LED点阵时钟
- 使用HTML5 Canvas绘制一个时钟
- canvas绘制时钟
- canvas绘制时钟
- canvas绘制电子时钟
- canvas绘制时钟
- Html5 Canvas 绘制 时钟
- Canvas绘制时钟
- Canvas绘制时钟
- jQuery对话框
- Servlet
- [Spark--基础]--repartition vs coalesce
- 算法基础【3】差分与前缀和
- leetcode 609. Find Duplicate File in System C++stringstream的一个很好地示范
- 使用canvas元素绘制指针式动画时钟
- linux下安装7z命令及7z命令的使用
- nginx关于域名解析的源码分析
- LWC 63: 750. Number Of Corner Rectangles
- java排序算法
- 【聚类分析】Kmeans算法理解及R语言实现
- 安装apache 2.4.29
- date('Y-m-d H:i:s',time()) 与 date('Y-m-d h:i:s',time())区别是什么
- 数据结构