使用canvas绘制时钟
使用canvas绘制时钟
什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。<canvas> 标签只是图形容器,所以我们必须使用脚本来绘制图形。通过它可以绘制路径,盒、圆、字符以及添加图像等等。
这篇博文,我将通过html5中的canvas元素绘制一个走动的时钟。
html代码如下:
<canvas id="clock" width="200" height="200" style="border:1px solid #ff0000;"></canvas>
其中id这个属性是必须要添加的,因为后面在JavaScript脚本中,我们会通过它来获得这个元素。 注意到width和height都是没有单位的,默认为px。 且<canvas>元素是没有内容的,当然,也可以写一些内容,对于不支持canvas标签的浏览器来说,它会显示其中的内容,而对于支持canvas标签的浏览器而言,其中的内容会被自动忽略。故其效果和<noscript>标签是一样的。我们还可以通过style属性来为canvas画布添加一个边框,这样就可以直接在页面中看到效果了。
注意:canvas元素默认是inline。
JavaScript代码如下:
window.onload=function(){
var clock=document.getElementById("clock").getContext('2d');//通过获取canvas元素获取2d上下文
var width=clock.canvas.width;//得到画布的宽度
var height=clock.canvas.height;//得到花布的高度
var r=width/2;//得到将要画的时钟的半径
var prop=width/150;//在此保留比例,以便于在更换画布大小时调节
function outline(){
clock.save();//保存当前状态
clock.translate(r,r);//将原点移动到(r,r)处
clock.beginPath();//每个函数内部都要有beginPath()方法
clock.lineWidth=3*prop;//通过lineWidth来设置划线的宽度,注意这里没有单位
clock.arc(0,0,r-clock.lineWidth/2,0,2*Math.PI,false);
clock.stroke();//绘制路径
var scaleNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
clock.font=12*prop+"px Arial";//通过font来设置字体的大小。关键:一定单位px,且后面一定要有字体样式
clock.textAlign="center";//设置位水平居中
clock.textBaseline="middle";//设置位垂直居中
scaleNumbers.forEach(function(number,i){//遍历数组
var rad=2*Math.PI/12*i;
var x=Math.cos(rad)*(r-15*prop);
var y=Math.sin(rad)*(r-15*prop);
clock.fillText(number,x,y);//在x y处绘制number
});
for(var i=0;i<=60;i++){
var rad=2*Math.PI/60*i;
var x=Math.cos(rad)*(r-7*prop);
var y=Math.sin(rad)*(r-7*prop);
clock.beginPath();
if(i%5===0){
clock.fillStyle="red";//填充的颜色
clock.arc(x,y,1*prop,0,2*Math.PI,false);
}else{
clock.fillStyle="black";
clock.arc(x,y,1*prop,0,2*Math.PI,false); }
clock.fill();
}
}
function hours(hour,minute){
clock.save();//一定要先保存
clock.beginPath();
var rad=2*Math.PI/12*hour;
var minute_rad=2*Math.PI/12/60*minute;
clock.rotate(rad+minute_rad);
clock.strokeStyle="blue";
clock.lineCap="round";
clock.lineWidth=5*prop;
clock.moveTo(0,2*prop);
clock.lineTo(0,-r+40*prop);
clock.stroke();
clock.restore();//恢复
}
function minutes(minute){
clock.save();
clock.beginPath();
clock.strokeStyle="orange";//设置路径的颜色
clock.lineWidth=4*prop;
clock.lineCap="round";//设置线的样式
var rad=2*Math.PI/60*minute;
clock.rotate(rad);//旋转画布
clock.moveTo(0,5*prop);//将“画笔”移动到(这里没有绘画)
clock.lineTo(0,-r+25*prop);
clock.stroke();
clock.restore();
}
function seconds(second){
clock.save();
clock.beginPath();
clock.fillStyle="red";
var rad=2*Math.PI/60*second;
clock.rotate(rad);
clock.moveTo(-2*prop,5*prop);
clock.lineTo(2*prop,5*prop);
clock.lineTo(1*prop,-r+18*prop);
clock.lineTo(3*prop,-r+18*prop);
clock.lineTo(0,-r+10*prop);
clock.lineTo(-3*prop,-r+18*prop);
clock.lineTo(-1*prop,-r+18*prop);
clock.fill();
clock.restore();
}
function middle_dot(){
clock.beginPath();
clock.fillStyle="white";
clock.arc(0,0,5*prop,0,2*Math.PI,false);
clock.fill();
} function all(){
clock.clearRect(0,0,width,height);
outline();
middle_dot();
var now=new Date();//通过Date对象获取时间
var hour=now.getHours();//获取当前小时数
var minute=now.getMinutes();
var second=now.getSeconds();
hours(hour,minute);
minutes(minute);
seconds(second);
clock.restore();
}
all();
setInterval(all,1000);//使用定时器不断更新时间 };
这样,一个canvas绘制的时钟就完成了。看看最后的效果图吧:
使用canvas绘制时钟的更多相关文章
- Canvas绘制时钟
①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- html5 Canvas绘制时钟以及绘制运动的圆
1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...
- 小任务之Canvas绘制时钟
背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...
- 用canvas绘制时钟
用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...
- HTML5 Canvas 绘制时钟
网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...
- 使用canvas绘制时钟 (http://heeroluo.net/Article/Detail/95)
准备工作 在HTML中指定一个区域放置时钟: <div id="clock" style="position: relative;"></di ...
- canvas绘制时钟及注释及save和restore的用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 用canvas绘制一个简易时钟
在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...
随机推荐
- 在SQL Server 2012中实现CDC for Oracle
在上篇在SSIS 2012中使用CDC(数据变更捕获)中,介绍了如何在SSIS 2012中使用CDC,本文在此基础上介绍,如何通过Attunity提供的Change Data Capture Desi ...
- 富文本KidnEditor在MVC中的应用
最近看到很多网站后台都用到了富文本,包括自己所在的公司也是.公司用的KindEditor,所以就讲讲KindEditor.之前我也没学过,所以网上搜了一篇博文,直接转载如下(PS:完全以学习为目的哦~ ...
- 【python】 [基础] 数据类型,字符串和编码
python笔记,写在前面:python区分大小写1.科学计数法,把10用e代替,1.23x10·9就是 1.23e9 或者 0.00012就是1 ...
- Web服务器磁盘满故障
问题: 硬盘显示被写满,但是用du -sh /*查看时占用硬盘空间之和还远小于硬盘大小,即找不到硬盘分区是怎么被写满的.今天下午接到同事紧急求助,说生产线服务器硬盘满了.该删的日志都删掉了.可空间还是 ...
- JS是按值传递还是按引用传递
按值传递(call by value)是最常用的求值策略:函数的形参是被调用时所传实参的副本.修改形参的值并不会影响实参. 按引用传递(call by reference)时,函数的形参接收实参的隐式 ...
- Android 自定义Popupwindow 注意事项,手机和平板的区别
首先自定义ppw是要继承Popupwindow 的 而要成功的显示出自定义的ppw就必须实现下面的三句代码 // 必要的三要素下面,不然popWind显示不出来 this.setContentView ...
- python中的二维数组和lamda
python列表推导式 list=[[0 for i in xrange(3)] for j in xrange(4)] 二维数组 g=lambda x,y:x*y; print g(2,9);
- css-让div永远在最底部
<div class="a"></div> .a{ position:fixed; bottom:0; }
- 【深入Java虚拟机】之一:Java内存模型与内存溢出
[深入Java虚拟机]之:Java内存区域与内存溢出 高速缓存模型如下: ----------------------------------------------------分割线-------- ...
- 【POJ 1523】SPF(割点)
儿子数大于1的树根或者 Low[v] >= DFN[u]的非树根节点v 就是割点. #include <cstdio> #include <cstring> const ...