最近在对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. 学习微信小程序之css6

  2. 盘点销售一体机 打印POS一体的设备。 打印,盘点,销售PDA(手持终端)+移动销售POS软件

    一.产品介绍 本产品为一个PDA(手持终端)+移动销售POS管理软件组合.可以实现功能如下: 可以实现移动销售(销售退货).盘点.配送.移库.打印小票的功能. 销售时,可以选择客户.业务员.库房,并且 ...

  3. C#ListBox对Item进行重绘,包括颜色

    别的不多说了,上代码,直接看 首先设置这行,或者属性窗口设置,这样才可以启动手动绘制,参数有三个 Normal: 自动绘制 OwnerDrawFixed:手动绘制,但间距相同 OwnerDrawVar ...

  4. 【翻译svg教程 】svg 的坐标系统

    http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...

  5. 文本选择问题: css & js

    CSS: /*Disable browser selection*/ .disableselect { -webkit-user-select: none; -moz-user-select: non ...

  6. Python框架之Tornado(三)请求

    概述 本篇就来详细介绍tornado服务器(socket服务端)是如何接收用户请求数据以及如果根据用户请求的URL处理并返回数据,也就是上图的3 系列所有步骤,如上图[start]是一个死循环,其中利 ...

  7. python os.path模块

    os.path.abspath(path) #返回绝对路径 os.path.basename(path) #返回文件名 os.path.commonprefix(list) #返回list(多个路径) ...

  8. Thinkphp3.2.3 执行query命令 包括在模板中使用<php> </php>时 query的使用方法

    $sql="select * from `rjshop_productbase` where `id`=1"; $Model =M();$query=$Model->quer ...

  9. yum 只下载不安装

    以下载busybox为例 1.首先确定有yumdownloader 这个软件,这个软件在yum-utils 工具包里面. # rpm -qa |grep yum-utils # yum -y inst ...

  10. day 2 Linux基础

    6.用户.群组和权限 1) 新建用户natasha,uid为1000,gid为555,备注信息为"master" useradd natasha usermod -u1000 na ...