html5时钟在图片上画指针,HTML5使用canvas元素绘制指针式动画时钟_网页代码站(www.webdm.cn)...
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();
}
div{display: -moz-box;display: -webkit-box;-moz-box-pack: center;-webkit-box-pack: center;width:100%;}
canvas{background-color:white;}
HTML5使用canvas元素绘制指针式动画时钟
html5时钟在图片上画指针,HTML5使用canvas元素绘制指针式动画时钟_网页代码站(www.webdm.cn)...相关推荐
- 谷歌图标html5代码,HTML5 canvas绘制chrome浏览器 logo图标_网页代码站(www.webdm.cn)
HTML5 canvas绘制chrome图标 使用canvas绘制chrome logo $ele:null, ele:null, context:null } $(function(){ oCanv ...
- 摘自人民网体育频道的JS卷角翻转方块图片切换_网页代码站(www.webdm.cn)
1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- html5在图片中加链接,JavaScript、html5、canvas实现图片上画超链接
本文主要为大家详细介绍了JavaScript html5 canvas实现图片上画超链接,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 1. html 2. javascrip ...
- LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
- html字母上方加箭头,html5怎么在图片上加左右箭头
html5怎么在图片上加左右箭头0 html5怎么在图片上加左右箭头 a[href]{font-size:25px;}a[href][id]{background-color:black;... ht ...
- 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面
弧度一块可能有误,需要再研究 导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上 ...
- C#图片处理之:在图片上画直线
在图片上画直线比画框更简单.线形的控制还是通过对Pen的设置来实现的. /**//// <summary> /// 在图片上画线 /// & ...
- python中怎样在图片上画线段_python 实现PIL模块在图片画线写字
图片上画线条 import sys from PIL import Image,ImageDraw im = Image.open("th.png") draw = ImageDr ...
- html中矩形坐标,js怎么根据坐标在图片上画出矩形框?
如图本地上传的图片,并点击获取到这个图片里每个地方的坐标,根据4个角坐标在图片上画出矩形框,该怎么画?大神支招. 我图片是显示在div里的,是不是应该用canvas显示图片? 代码: Document ...
- 网页在图片上画长方形和直线,并且能控制和编辑
网页在图片上画长方形和直线,并且能控制和编辑 网页在图片上画长方形和直线,并且能控制和编辑 网页在图片上画长方形和直线,并且能控制和编辑 工作上用到了 在一张图片上画正方形和直线.并且可以控制和编辑 ...
最新文章
- YY的GCD 莫比乌斯反演
- [Git]常用的Git命令行
- 简述在虚拟机中安装 centos 的过程_从零构建Fabric开发运行环境手册(一):安装OS虚拟机(CentOS)...
- 联机日志损坏的解决办法
- docker电子书_果然!这10个Docker容器坑多数人都中招过
- pandas - 案例(美国2012年总统候选人政治献金数据分析)
- 谈表达式树的缓存(7):五种缓存方式的总体分析及改进方案
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(六)完美移动
- wordvba编程代码大全_面向对象、设计原则、设计模式、编程规范、重构
- java socket通讯_Java socket通讯实现过程及问题解决
- neo4j 查 match
- gcc编译选项【转】
- php判断是否存在http,php获取http-header来判断文件是否存在
- Android开发指南(41) —— Searchable Configuration
- linux下设置set位权限,网络安全系列之四十 在Linux中设置SET位权限
- 遗传算法是机器学习算法嘛?_基于遗传算法的机器人控制器方法
- 有关mysql触发器的感悟_有关mysql触发器实例分享
- 相机成像原理及坐标变换
- 最新版WebMax0929版下载【火爆速递】
- js中输出2000~2100年之间所有的闰年;
热门文章
- 电脑键盘部分按键失灵_笔记本键盘部分失灵怎么办,笔记本个别键失灵的处理方法...
- 个人六年的成长与工作经验分享
- 【EM算法】小波域隐马尔科夫树模型参数的EM算法估计MATLAB仿真
- 想当程序员吗?这11所大学计算机专业堪称国内顶级,高考考生千万不要错过
- Finance reading list(Mar.2019,by Stephen Nie)
- php screw.so,php_screw
- 2021年广东省安全员A证第三批(主要负责人)及广东省安全员A证第三批(主要负责人)证考试
- Android dev 设备访问权限 777,Android Studio:/ dev / kvm设备权限被拒绝
- 搭建excel在线编辑服务器,开源免费!自动动手搭建一款更加强大的在线Excel工具...
- 腾讯 AI Lab 2020 年度回顾