最近在对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绘制时钟的更多相关文章

  1. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  2. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  3. Canvas绘制时钟

    ①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...

  4. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  5. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  6. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. GDI绘制时钟效果,与系统时间保持同步,基于Winform

    2018年工作之余,想起来捡起GDI方面的技术,特意在RichCodeBox项目中做了两个示例程序,其中一个就是时钟效果,纯C#开发.这个CSharpQuartz是今天上午抽出一些时间,编写的,算是偷 ...

  8. 小任务之Canvas绘制时钟

    背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...

  9. 使用HTML5制作时钟

    之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解. <!DOCTYPE h ...

随机推荐

  1. 矩阵快速幂 HDU 4565 So Easy!(简单?才怪!)

    题目链接 题意: 思路: 直接拿别人的图,自己写太麻烦了~ 然后就可以用矩阵快速幂套模板求递推式啦~ 另外: 这题想不到或者不会矩阵快速幂,根本没法做,还是2013年长沙邀请赛水题,也是2008年Go ...

  2. java function retry wrapper

    import java.util.concurrent.Callable; /** * Created by huahui.yang on 1/29/16. */ public class Retry ...

  3. 同步机制 note

    1.信号量与互斥体的不同之处: 不需要由最初获取它的那个线程来释放. 信号量可以用来调停对资源池的访问. 2. 条件变量: 允许任意复杂的条件表达式作为等待条件,允许更复杂的调度策略.

  4. QuartZ Cron表达式

     Cron Expressions cron的表达式是字符串,实际上是由七子表达式,描述个别细节的时间表.        Seconds        Minutes        Hours     ...

  5. MacOS下Python的多版本管理(pyenv)

    与windows下设置绝对路径不同,pyenv使用了一种更优雅的方式来管理Python的版本.pyenv通过在$PATH的最前面插入一个垫片路径(shims),例如:~/.pyenv/shims:/u ...

  6. 半吊子学习Swift--天气预报程序-获取天气信息

    昨天申请的彩云天气Api开发者今天上午已审核通过  饭后运动过后就马不停蹄的来测试接口,接口是采用经纬度的方式来获取天气信息,接口地址如下 https://api.caiyunapp.com/v2/ ...

  7. bzoj1009矩阵快速面+kmp

    其实kmp真的很次要,求长度为20的kmp感觉真的有点杀鸡用牛刀 这题思路相当明确:一看题就是数位dp,一看n的大小就是矩阵 矩阵的构造用m*m比较方便,本来想写1*m的矩阵乘m*m的,但是感觉想起来 ...

  8. 【异常】No ManagedConnections available within configured blocking timeout

    Caused by: org.jboss.util.NestedSQLException: No ManagedConnections available within configured bloc ...

  9. Java jvisualvm简要说明

    jvisualvm能干什么:监控内存泄露,跟踪垃圾回收,执行时内存.cpu分析,线程分析... jvisualvm已经被集成在jdk1.6以上的版本中(不是jre).自身运行需要最低jdk1.6版本, ...

  10. github for windows 安装 使用

    遇到无数的未知问题.光是安装就搞了好久. 安装程序显示安装了.NET Framework4.5,然后提示重启.重启后,自动开始下载文件,最多到2%就走不动了. 后来请求了下面这个链接,才开始下载了(虽 ...