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"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...
随机推荐
- 【C#】【Thread】CountdownEvent任务并行
System.Threading.CountdownEvent 是一个同步基元,它在收到一定次数的信号之后,将会解除对其等待线程的锁定. CountdownEvent 专门用于以下情况:您必须使用 ...
- .NET Core 1.0 RC2 历险之旅
文章背景:对于.NET Core大家应该并不陌生, 从它被 宣布 到现在已经有1-2年的时间了,其比较重要的一个版本1.0 RC2 也即将发布..Net Core从一个一个的测试版到现在的RC2,经历 ...
- NOSQL数据模型和CAP原理
NOSQL数据模型和CAP原理 http://blog.sina.com.cn/s/blog_7800d9210100t33v.html 我本来一直觉得NoSQL其实很容易理解的,我本身也已经对NoS ...
- Androidstudio安装AVD出现no system images installed for this target解决方案
解决方案:
- sqlserver 游标
DECLARE ChangeInvCodeCursor CURSOR FOR SELECT A.name AS tablecolumn,C.name AS tablename FROM sys.col ...
- UI: 窗口全屏, 窗口尺寸
窗口全屏 窗口尺寸 示例1.窗口全屏UI/FullScreen.xaml <Page x:Class="Windows10.UI.FullScreen" xmlns=&quo ...
- jsp利用application统计在线人数的方法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 教你一招：EXCEL单元格随机生成字母
=CHAR(RANDBETWEEN(1,4)+65) 65代表大写字母A,依次类推 1代表从A开始 4代表到D结束
- 使用jquery脚本获取随笔、文章和评论的统计数，自定义显示位置
为了这个问题,花了好些时间去摸索,无奈没有搞定.于是,我就到博问去提问,终于搞定! 在此,非常感谢SeayXu的热心帮助. 1.在需要的位置添加一个标签 <div id="stats_ ...
- 【BZOJ-4082】Surveillance 树链剖分 LCA + 贪心
4082: [Wf2014]Surveillance Time Limit: 40 Sec Memory Limit: 128 MBSubmit: 260 Solved: 100[Submit][ ...