canvas案例——画时钟
基本思路，先画一个200半径的圆
ctx.arc(250,250,200,0,2*Math.PI);
然后再画时分刻度，可以先利用translate变化坐标到圆的中心点，然后再通过rotate旋转
//画12个时刻度线
2 for(var i=0;i<12;i++){
3 ctx.save();
4 ctx.translate(250,250);
5 ctx.rotate(i*Math.PI/6);
6 ctx.moveTo(0,-180);
7 ctx.lineTo(0,-195);
8 ctx.stroke();
9 ctx.restore();
10 }
11 //画60个分刻度线
12 for(var i=0;i<60;i++){
13 //经过时刻度跳过
14 if(i%5!=0){
15 ctx.save();
16 ctx.translate(250,250);
17 ctx.rotate(i*Math.PI/30);
18 ctx.beginPath();
19 ctx.strokeStyle="#555";
20 ctx.moveTo(0,-190);
21 ctx.lineTo(0,-195);
22 ctx.closePath();
23 ctx.stroke();
24 ctx.restore();
25 }
26 }
需要注意，在画刻度线时要用到save()和restore()
save()是保存原始的坐标，经过变换坐标后画刻度线，再restore()回到原始坐标。不然的话，每一次坐标变化都是基于前一次的坐标。
再利用date()函数获取当前时间，得到时/分/秒，分别计算指针的相应角度，利用rotate旋转。
一开始用Math计算各指针的两端坐标，再画指针，发现需要考虑落在各象限的正负值，很烦，直接rotate旋转，太简单了。
画时针
//画时针
ctx.save();
ctx.translate(250,250);
ctx.rotate(hour/12*2*Math.PI);
ctx.beginPath();
ctx.moveTo(0,15);
ctx.lineTo(0,-150);
ctx.closePath();
ctx.stroke();
ctx.restore();
完整代码
<html>
<head>
<title>canvas demo</title>
</head>
<body>
<canvas id="mycanvas" width="500px" height="500px" ></canvas>
<script type="text/javascript">
drawclock();
setInterval(drawclock,1000);
function drawclock(){
var mycanvas = document.getElementById("mycanvas");
var ctx = mycanvas.getContext("2d");
ctx.clearRect(0,0,500,500);
//画圆圈
ctx.beginPath();
ctx.lineWidth=5;
ctx.beginPath();
ctx.arc(250,250,200,0,2*Math.PI);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(250,250,5,0,2*Math.PI);
ctx.closePath();
ctx.stroke();
//画12个时度线
for(var i=0;i<12;i++){
ctx.save();
ctx.translate(250,250);
ctx.rotate(i*Math.PI/6);
ctx.beginPath();
ctx.moveTo(0,-180);
ctx.lineTo(0,-195);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
//画60个分度线
for(var i=0;i<60;i++){
//经过时度跳过
if(i%5!=0){
ctx.save();
ctx.translate(250,250);
ctx.rotate(i*Math.PI/30);
ctx.beginPath();
ctx.strokeStyle="#555";
ctx.moveTo(0,-190);
ctx.lineTo(0,-195);
ctx.closePath();
//context.globalCompositeOperation='xor';
ctx.stroke();
ctx.restore();
}
}
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
hour=hour>12?hour-12:hour;
hour=hour+min/60; //画时针
ctx.save();
ctx.translate(250,250);
ctx.rotate(hour/12*2*Math.PI);
ctx.beginPath();
ctx.moveTo(0,15);
ctx.lineTo(0,-150);
ctx.closePath();
ctx.stroke();
ctx.restore();
//画分针
ctx.save();
ctx.translate(250,250);
ctx.rotate(min/60*2*Math.PI);
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(0,20);
ctx.lineTo(0,-170);
ctx.closePath();
ctx.stroke();
ctx.restore();
//画分针
ctx.save();
ctx.translate(250,250);
ctx.rotate(sec/60*2*Math.PI);
ctx.lineWidth=1;
ctx.beginPath();
ctx.moveTo(0,25);
ctx.lineTo(0,-180);
ctx.closePath();
ctx.stroke();
ctx.restore();
} </script>
<style>
#mycanvas{
border: solid 1px;
}
</style> </body>
</html>
canvas案例——画时钟的更多相关文章
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- canvas画时钟，重拾乐趣!
canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...
- canvas 画时钟 会动呦
//半径 var r = 130; //重置原点 ctx.save(); ctx.translate(400, 500); //使用translate重置原点 function drawClock() ...
- H5 canvas圆形的时钟
今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...
- 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助
最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...
- canvas实现的时钟效果
最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...
- canvas做的时钟，学习下
canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(" ...
- canvas绘制表盘时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS3形变——transform与transform-origin画时钟
css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...
随机推荐
- centos 6x系统下源码安装mysql操作记录
在运维工作中经常部署各种运维环境,涉及mysql数据库的安装也是时常需要的.mysql数据库安装可以选择yum在线安装,但是这种安装的mysql一般是系统自带的,版本方面可能跟需求不太匹配.可以通过源 ...
- HTTP状态码对应
HTTP的状态码 对于状态码大家如果经常在线买东西就能知道,我们买了东西就会有个订单状态:出库.发货中.送达中.送达等,其实这些状态就是状态码,只不过这些状态码都是文字.HTTP 响应的时候也有状态码 ...
- ThinkPHP常用查询
1.常规 $map2['state'] = 1; $User->where ( $map2 )->find(); 2. OR 查询 $where['name'] = array('neq' ...
- C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - .NET商业化成品成熟各种数据权限的需求对应例子代码
还是我上次提出的那个问题问题:假设一个订单表,1.角色A可以看自己的2.角色B可以看工作组的3.角色C可以看金额是1000元以下的(自定义条件是否可行?如果可以,请详细说明)4.角色D可以看整个部门的 ...
- IIS7注册本机模块
问题描述:打开mp4文件要映射给mod_h264_streaming.dll(http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Intern ...
- Python学习Day2笔记(集合和文件操作)
1.集合的使用 列表是有序的可包含重复内容的 集合是无序的不可包含重复内容的 1) 集合关系测试 #列表去重list_1=[1,4,5,6,7,8,9,7,5,4,23,2] #有重复数据 list_ ...
- Qt——一些工具的使用
一.使用Qt需要安装哪些软件 如果不使用VS,那么只需Qt组件就行了,安装完成后使用QtCreator进行编程. 如果使用VS,则需要安装下面几个: 1.Visual Studio 2.Qt组件 3. ...
- bzoj1800[Ahoi2009]fly 飞行棋 暴力枚举
找了道bzoj的水题,千年难得一遇. 建议初学者做做,然而我个蒟蒻初学时应该A不了..... < http://www.lydsy.com/JudgeOnline/problem.php?id= ...
- 【转】一些 SQLite技巧
部分来源于网络 SQLite 删除重复行 需求:现存在一张表tender_to_detailedlist,然后里面的列tender_id和detailedlist_id具有相同的数据且不确定相同数据的 ...
- 即使用ADO.NET，也要轻量级实体映射，比Dapper和Ormlite均快
不管出于什么原因,有时候框架人员摒弃了NH或EF,而使用原生数据库访问对象. 为了优美的编程,用上我写的轻量级映射扩展方法吧 目的:将SqlDataReader自动转换成T类型 代码如下: /// & ...