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"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...
随机推荐
- BZOJ 3505 【Cqoi2014】 数三角形
Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个. 下图为4x4的网格上的一个三角形. 注意三角形的三点不能共线. Input 输入一行,包含两个空格分隔的正整数m ...
- C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 实现缓存预热
因为大型应用系统可能有几十个子系统,为了减轻数据库频繁读写压力.提高系统的运行速度.反映速度,大型应用系统都需要采用缓存机制提高运行效率.Redis 缓存预热实现将来大家很多基础数据都可以缓存获取,不 ...
- Membership 重置密码
public ActionResult ChongZhiMiMa() { Membership.GetUser("admin").UnlockU ...
- Splay
#include <cstdio> #include <iostream> using namespace std; *1e5;//nil表示不存在的节点 ][],flag[] ...
- 数据存储单位的换算关系（TB、PB、EB、ZB、YB）
- BZOJ 1005 [HNOI2008] 明明的烦恼（组合数学 Purfer Sequence）
题目大意 自从明明学了树的结构,就对奇怪的树产生了兴趣...... 给出标号为 1 到 N 的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Input 第一行为 N( ...
- QQ个人文件夹中的文件被占用,解决办法
我的情况是记住密码的账号不可以登录,不记住密码的账号确可以登录,突然就这样,我也很郁闷. 找到路径C:\Users\Public\Documents\Tencent\QQ下的UserDataInfo. ...
- deepin 15.3 安装配置nginx
1.安装nginx sudo apt-get install nginx 2.配置nginx sudo gedit /etc/nginx/sites-enabled/default 找到:index ...
- mosquitt win32
软件 mosquitto-1.4.10-install-win32.exe. 安装时候提示下载后面两个.win32openssl一定是1_0_1,否则没有需要的dll文件. pthreadVC2.dl ...
- 计数器(counter)，有序字典(OrderDict)，默认字典(defaultdict)，可命名元祖(namedtuple)，双向队列(deque)，单项队列(deuqe.Queue)
Python_Day_05 计数器(counter),有序字典(OrderDict),默认字典(defaultdict),可命名元祖(namedtuple),双向队列(deque),单项队列(deuq ...