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"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...
随机推荐
- Centos7的firewalld配置
红帽官方的使用文档: https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/Security_Gu ...
- 文件上传---普通文件fileupload.jar和url文件httpUrlConnection
文件上传---普通文件和url文件 主要用来学习使用common-fileupload.jar和java.net.httpURLConnection 普通文件: //上传xls文件到临时目录 if ( ...
- Writing Clean Code 读后感
最近花了一些时间看了这本书,书名是 <Writing Clean Code ── Microsoft Techniques for Developing Bug-free C Programs& ...
- linux perf - 性能测试和优化工具
Perf简介 Perf是Linux kernel自带的系统性能优化工具.虽然它的版本还只是0.0.2,Perf已经显现出它强大的实力,足以与目前Linux流行的OProfile相媲美了. Perf 的 ...
- 【原】关于使用sklearn进行数据预处理 —— 归一化/标准化/正则化
一.标准化(Z-Score),或者去除均值和方差缩放 公式为:(X-mean)/std 计算时对每个属性/每列分别进行. 将数据按期属性(按列进行)减去其均值,并处以其方差.得到的结果是,对于每个属 ...
- delphi 取cpu号
从网上找的取cpu号 在d7中测试通过了 push,move,pop ...有点难 现在的水平我也就只能拿来主义了 /// <summary>/// 取cpu号/// </summa ...
- Python基本数据类型之整型和布尔型
整型和布尔型 获取对象的数据类型 1.type() 2.dir() 3.help() 4.在pycharm里面的操作 数字类型 int 创建: int() 接收数字字符串 .bit_lenght() ...
- 初识Jsoup之解析HTML
按照国际惯例,我首先应该介绍下Jsoup是个什么东西,然后在介绍下具体用法,然后在来个demo演示,其实我也是这么想的,小编今天花了一天的时间从学习—>解析页面,总算是成果圆满了吧,啊哈,但是, ...
- STM32库函数编程、Keli/MDK、stm32f103zet6
catalogue . Cortex-M3地址空间 . 基于标准外设库的软件开发 . 基于固件库实现串口输出(发送)程序 . 红外接收实验 . 深入分析流水灯例程 . GPIO再举例之按键实验 . 串 ...
- sqlalchemy入门记录
前言 发现翻译全文时间比较久,所以先整个简单的使用说明吧 安装SQLAlchemy pip install sqlalchemy 查看SQLAlchemy版本 In [1]: import sqlal ...