Html5绘制时钟
最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示:
具体思路在上图已有说明,代码如下:
<script type="text/javascript"> //绘制圆形的弧度,ctx 为绘制环境,x,y为绘制中心,r为绘制半径,st为起始弧度,end为结束弧度
function circle(ctx, x, y, r, st, end, w) {
ctx.lineWidth = w;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, r, st, end, true);
ctx.stroke();
} //画一个白色的圆,用以覆盖
function circle0(ctx, x, y, r, st, end) {
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(x, y, r, st, end, true);
ctx.fill();
}
function circle1(ctx, x, y, r, st, end, w) {
ctx.strokeStyle = "gray";
ctx.lineWidth = w;
ctx.beginPath();
ctx.arc(x, y, r, st, end, true);
ctx.stroke();
} //绘制时钟用的线
function line(ctx, x1, y1, x2, y2, w) {
if (w == 1) {
ctx.strokeStyle = "red";
} else if (w == 2) {
ctx.strokeStyle = "blue";
} else {
ctx.strokeStyle = "black";
}
ctx.lineWidth = w;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function drawClock() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
//绘制一个钟表
var cX = 300;
var cY = 200;
var radius = 100; //绘制分与秒的刻度
for (var i = 0; i < 60; i++) {
circle(ctx, cX, cY, radius, i * 6 * Math.PI / 180, (i + 1) * 6 * Math.PI / 180, 1);
}
circle0(ctx, cX, cY, radius * 9 / 10, 0, 2 * Math.PI, true);
//绘制时刻度
for (var i = 0; i < 12; i++) {
circle(ctx, cX, cY, radius, i * 30 * Math.PI / 180, (i + 1) * 30 * Math.PI / 180, 2);
}
circle0(ctx, cX, cY, radius * 8 / 10, 0, 2 * Math.PI, true); //外围再画一圈
circle1(ctx, cX, cY, radius * 11 / 10, 0, 2 * Math.PI, 1);
ctx.save();
ctx.fillStyle = "black";
ctx.font = "10px Arial";
//在钟表的周围画上数字
for (var i = 0; i < 12; i++) {
var fX = cX + Math.cos((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
var fY = cY + Math.sin((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
ctx.fillText((i + 1), fX, fY);
}
var date = new Date();
var second = date.getSeconds();
var minute = date.getMinutes();
var hour = date.getHours();
hour = hour % 12; //采用12小时制 var secondX = cX + Math.cos(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
var secondY = cY + Math.sin(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
var minuteX = cX + Math.cos(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
var minuteY = cY + Math.sin(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
//小时为了准确起见,应该要加上分的弧度
var hourX = cX + Math.cos(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
var hourY = cY + Math.sin(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
//画秒针,红色
line(ctx, cX, cY, secondX, secondY, 1);
//画分针,蓝色
line(ctx, cX, cY, minuteX, minuteY, 2);
//画时针,黑色
line(ctx, cX, cY, hourX, hourY, 3);
ctx.fillStyle = "black";
ctx.font = "15px Arial";
ctx.fillText("CurrentTime is : " + date.toLocaleString(), 150, 450);
ctx.save();
}
window.onload = function () {
//循环,1s一次,且要在加载完才可以开始,否则会出现找不到对象的异常
setInterval(drawClock, 1000);
}
</script>
Html5绘制时钟的更多相关文章
- html5 Canvas绘制时钟以及绘制运动的圆
1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...
- 使用canvas绘制时钟
使用canvas绘制时钟 什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
- Canvas绘制时钟
①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...
- Html5绘制饼图统计图
这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...
- html5绘制折线图
html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...
- HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- GDI绘制时钟效果,与系统时间保持同步,基于Winform
2018年工作之余,想起来捡起GDI方面的技术,特意在RichCodeBox项目中做了两个示例程序,其中一个就是时钟效果,纯C#开发.这个CSharpQuartz是今天上午抽出一些时间,编写的,算是偷 ...
- 小任务之Canvas绘制时钟
背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...
- 使用HTML5制作时钟
之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解. <!DOCTYPE h ...
随机推荐
- 矩阵快速幂 HDU 4565 So Easy!(简单?才怪!)
题目链接 题意: 思路: 直接拿别人的图,自己写太麻烦了~ 然后就可以用矩阵快速幂套模板求递推式啦~ 另外: 这题想不到或者不会矩阵快速幂,根本没法做,还是2013年长沙邀请赛水题,也是2008年Go ...
- java function retry wrapper
import java.util.concurrent.Callable; /** * Created by huahui.yang on 1/29/16. */ public class Retry ...
- 同步机制 note
1.信号量与互斥体的不同之处: 不需要由最初获取它的那个线程来释放. 信号量可以用来调停对资源池的访问. 2. 条件变量: 允许任意复杂的条件表达式作为等待条件,允许更复杂的调度策略.
- QuartZ Cron表达式
Cron Expressions cron的表达式是字符串,实际上是由七子表达式,描述个别细节的时间表. Seconds Minutes Hours ...
- MacOS下Python的多版本管理(pyenv)
与windows下设置绝对路径不同,pyenv使用了一种更优雅的方式来管理Python的版本.pyenv通过在$PATH的最前面插入一个垫片路径(shims),例如:~/.pyenv/shims:/u ...
- 半吊子学习Swift--天气预报程序-获取天气信息
昨天申请的彩云天气Api开发者今天上午已审核通过  饭后运动过后就马不停蹄的来测试接口,接口是采用经纬度的方式来获取天气信息,接口地址如下 https://api.caiyunapp.com/v2/ ...
- bzoj1009矩阵快速面+kmp
其实kmp真的很次要,求长度为20的kmp感觉真的有点杀鸡用牛刀 这题思路相当明确:一看题就是数位dp,一看n的大小就是矩阵 矩阵的构造用m*m比较方便,本来想写1*m的矩阵乘m*m的,但是感觉想起来 ...
- 【异常】No ManagedConnections available within configured blocking timeout
Caused by: org.jboss.util.NestedSQLException: No ManagedConnections available within configured bloc ...
- Java jvisualvm简要说明
jvisualvm能干什么:监控内存泄露,跟踪垃圾回收,执行时内存.cpu分析,线程分析... jvisualvm已经被集成在jdk1.6以上的版本中(不是jre).自身运行需要最低jdk1.6版本, ...
- github for windows 安装 使用
遇到无数的未知问题.光是安装就搞了好久. 安装程序显示安装了.NET Framework4.5,然后提示重启.重启后,自动开始下载文件,最多到2%就走不动了. 后来请求了下面这个链接,才开始下载了(虽 ...