canvas画时钟,重拾乐趣!
canvas时钟--效果图
一、先来简单介绍画时钟需要的canvas知识
1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用。
HTML代码:
<canvas id="canvas" class="canvas" width="400" height="400" border:></canvas>
2.使用id寻找canvas元素,在js代码中使用document.getElementById()等方法获取id。
var canvas = document.getElementById("canvas");
3.通过canvas元素的getContext方法来获取其上下文(Context),即创建Context对象,以获取允许绘画的2D环境。
var ctx = canvas.getContext("2d");
4.先来认识一下canvas的绘制方法。
(1)绘制矩形的两种方法:fillRect 和 strokeRect
前者用于绘制用颜色填充(fill)区域的矩形,后者用于绘制轮廊(stroke)或线条。图形指定颜色用到了两个属性,即fillStyle 和 strokeStyle,前者用于指定要绘制的填充区域的颜色,后者用于指定要绘制的线条颜色。
//绘制填充颜色矩形,默认黑色 ctx.fillStyle="red"; ctx.fillRect(0,0,200,100); //绘制有颜色线条 ctx.strokeStyle="blue"; ctx.strokeRect(0,0,100,50);
(2)绘制圆形
绘制圆形是会用到四种方法:beginPath、arc、closePath和fill或stroke。
//画圆填充红颜色//绘制园用法:ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise); ctx.beginPath(); ctx.fillStyle="red"; ctx.arc(0,0,100,0,2*Math.PI,true); ctx.closePath(); ctx.fill(); //线条蓝色画圆 ctx.beginPath(); ctx.strokeStyle="blue"; ctx.lineWidth=10;//设置线条宽度 ctx.arc(0,0,174,0,Math.PI*2,true); ctx.stroke();
(3)绘制直线
用到两个主要方法:moveTo 和 lineTo 以及stroke。
ctx.moveTo(x,y)——规定线起始点(x,y)。ctx.lineTo(x,y)——规定直线路线的终点。
ctx.moveTo(,); ctx.lineTo(,); ctx.stroke();//该方法用于沿该路径绘制线条
二、画canvas时钟过程
首先,定义画布字体的为圆角,让我们看起来美美的:ctx.lineCap="round";
其次,非常重要,时钟是随着时分秒针的转动而转动的,so——我们需要画布范围内必须设计画布不断清除和刷新:ctx.clearRect(0,0,400,400);
再次,一个画布初始中心点(0,0)是在画布左上角,so——画时钟需要把中心点转移:ctx.translate(200,200);
最后,也是最重要的,每多一个save()保存就必须在下面补上一个还原restore();
1、画分刻线
画线嘛,上面咱们已经讲过画线的步骤,就不多说啦!只需要注意用到rotate()方法将,先用ctx.moveTo(),ctx.lineTo在画布右侧画出第一根分刻线,再定义需要旋转的角度变量——rotateD,经过ctx.rotate(rotateD)方法来for循环以及画布不断清除刷新的状态,即可画出分刻线。
当然这里还需要注意一点:画布需要用到另个方法来包含要执行的内容,分别是save()、restore()。save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许你临时地改变图像状态,然后,通过调用 restore() 来恢复以前的值。我打个比喻:我有一只手,戴上手套去完成一些事情,手套摘下来之后,我的手还是我的手。额,有点。。。呵呵
//画刻度线 for (var i = 0; i ; i++) { ctx.save(); ctx.beginPath(); var rotateD = i*Math.PI*2/60; ctx.rotate(rotateD); ctx.lineWidth = 4; ctx.moveTo(170,0); ctx.lineTo(160,0); ctx.stroke(); ctx.restore(); };
2、画时刻线
同理,画时刻线只需要修改线宽以及旋转角度
3、画时针
在前面new一个data变量var date = new Date;,并且定义一个时针随时间变化旋转角度也变化的变量rotateH。
小时针旋转角度rotateH;
公式:rotateH = 时针旋转角度 +分针旋转角度/12 - 直角 = data.getHours()/12*2*Math.PI + date.getMinutes()/60/12*Math.PI*2 - Math.PI/2;
(为什么会减Math.PI/2呢,因为时针的初始值为(-12,0)、(125,0);针指向正好是在三点中位置,所以需要减掉一个直角才能从十二点开始旋转)。
4、画分针
定义一个分针随时间变化旋转角度也变化的变量rotateM。
公式:rotateM = 分针旋转角度 + 秒针旋转角度/60 -直角 = date.getMinutes()/60*Math.PI*2 + date.getSeconds()/60/60*Math.PI*2 - Math.PI/2;
5、画秒针
定义一个分针随时间变化旋转角度也变化的变量rotateS。
公式:rotateM = 秒针旋转角度 - 减直角 = date.getSeconds()/60*Math.PI*2 - Math.PI/2;
6、时针数字略
三、canvas实现时钟完整代码
js完整代码:
jQuery(function($){ function clock(){ var canvas= document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var date = new Date; ctx.lineCap = "round";//字体变圆角 ctx.clearRect(0,0,400,400);//不断清除画布 不断再执行刷新 ctx.save();//每多一个保存就必须在下面补上一个还原restore() ctx.translate(200, 200);//中心点转移 //画刻度线 for (var i = 0; i < 60; i++) { ctx.save(); ctx.beginPath(); var rotateD = i*Math.PI*2/60; ctx.rotate(rotateD); ctx.lineWidth = 4; ctx.moveTo(170,0); ctx.lineTo(160,0); ctx.stroke(); ctx.restore(); }; for (var i = 0; i < 12; i++) { ctx.save(); ctx.beginPath(); var rotateB = i*Math.PI*2/12; ctx.lineWidth = 6; ctx.rotate(rotateB); ctx.moveTo(170,0); ctx.lineTo(150,0); ctx.stroke(); ctx.restore(); }; //画时针 var rotateH = date.getHours()/12*Math.PI*2 + date.getMinutes()/60/12*Math.PI*2 - Math.PI/2; ctx.save(); ctx.beginPath(); ctx.rotate(rotateH); ctx.lineWidth=12; ctx.moveTo(-12,0); ctx.lineTo(125,0); ctx.stroke(); ctx.restore(); //画分针 var rotateM = date.getMinutes()/60*Math.PI*2 + date.getSeconds()/60/60*Math.PI*2 - Math.PI/2; ctx.save(); ctx.strokeStyle="red"; ctx.beginPath(); ctx.rotate(rotateM); ctx.lineWidth=9; ctx.moveTo(-12,0); ctx.lineTo(135,0); ctx.stroke(); ctx.restore(); //画秒针 var rotateS = date.getSeconds()/60*Math.PI*2 - Math.PI/2; ctx.save(); ctx.strokeStyle="red"; ctx.beginPath(); ctx.rotate(rotateS); ctx.lineWidth=6; ctx.moveTo(-16,0); ctx.lineTo(140,0); ctx.stroke(); //画中心圆点 ctx.fillStyle="red"; ctx.arc(0,0,10,0,2*Math.PI) ctx.closePath(); ctx.fill(); //画秒针圆圈头 ctx.strokeStyle="red"; ctx.moveTo(160,0); ctx.arc(150,0,8,0,2*Math.PI); ctx.stroke(); ctx.restore(); // 画clock的表盘 ctx.beginPath(); ctx.strokeStyle="blue"; ctx.lineWidth=10; ctx.arc(0,0,174,0,Math.PI*2); ctx.stroke(); ctx.restore(); window.requestAnimationFrame(clock); }; window.requestAnimationFrame(clock); });
总结,写得粗糙,仅供参考,期待共同探讨!
canvas画时钟,重拾乐趣!的更多相关文章
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- canvas 画时钟 会动呦
//半径 var r = 130; //重置原点 ctx.save(); ctx.translate(400, 500); //使用translate重置原点 function drawClock() ...
- html5学习(一)--canvas画时钟
利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...
- 用canvas画时钟
效果图在博客首页上. html: <canvas id="canvas" >Your browser does not support canvas</canva ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 简单酷炫的Canvas数字时钟
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- CSS魔法堂:重拾Border之——更广阔的遐想
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂:重拾Border之——图片作边框
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
随机推荐
- UVa 10523 - Very Easy !!!
题目大意:给你一个公式,直接按照式子计算就可以了,要用到大数. import java.io.*; import java.util.*; import java.math.*; class Main ...
- DEV组件LookupEdit,ComboBoxEdit绑定数据源
LookupEdit可以绑定数据表(DataTable)或对象数据组(Object List)作为数据源,下拉窗体可自定显示栏位. 绑定数据源需要设置三个参数:DisplayMember ,Value ...
- Angular - - ngIf、ngSwitch、ngHide/ngShow
在组合这些ng指令写到一篇文章里的时候,基本是有规则的,野兽把功能相似相近的一类大多会组合到一起,方便理解和记忆. 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断. ...
- C语言的指针使用
今天老师总结了一下指针内容,感觉对理解指针有帮助, 1.大家在使用指针的时候容易忽略掉指针所在的位置. 假如定义一个变量int a=10: int *p: p=&a; //p中存放变量 ...
- 选择移动web开发框架研究——有mui、frozenui以及Sencha Touch等
纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家 ...
- Intent的属性及Intent-filter配置——Component属性
Intent的Component属性需要接受一个ComponentName对象,ComponentName对象包含如下几个构造器. ComponentName(String pkg,String cl ...
- Javaweb阶段知识回顾一
java基础增强 一.jdk1.5的新特性 自动封箱拆箱 封箱:Java自动将原始类型值转换成对应的对象,如将int的变量转换成Integer对象 拆箱:自动将对应的对象转换成原始类型值,将Integ ...
- android Fragment和FragmentActivity
MainActivity.java import android.app.AlertDialog; import android.app.Notification; import android.co ...
- 使用SpringMvc调用POI jar导出excel的源码
@RequestMapping(value = "/result/export") public String export(ResultIn in,HttpServletRequ ...
- TCP&UDP
TCP(传输控制协议) 建立连接,形成传输数据的通道 在连接中进行大数据传输(数据大小不受限制) 通过三次握手完成连接,是可靠协议,安全送达(三次握手向服务器发送请求,响应请求回复,发送数据) 必须建 ...