canvas做的时钟,学习下
canvas标签只是图形容器,您必须使用脚本来绘制图形。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。
getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。
fillRect(l,t,w,h):默认颜色是黑色
strokeRect(l,t,w,h):带边框的方块。默认一像素黑色边框
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
beginPath():定义开始绘制路径, 它把当前的点设置为 (0,0)。 当一个画布的环境第一次创建,beginPath() 方法会被显式地调用。
closePath():结束绘制路径(将起点与终点进行连接)
arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给定的半径radius穿过(x1,y1)。
lineTo(x,y):从一点开始绘制一条直线,到(x,y)为止。
moveTo(x,y):将绘图游标移动到(x,y),不画线。
font:表示文本样式、大小及字体,用css中指定字体的格式来指定,例如"bold 10px Arial"。
textAlign:表示文本对齐方法。可能的值有"start"、"end"、"left"、"right"和"center"。建议使用"start"和"end",不要使用“left”和“right”,因为前两者的意思更稳妥,能同时适合从左到右和从右到左
显示(阅读)的语言。
textBaseline:表示文本的基线。可能的值有“top”、“hanging”、“middle”、“alphabetic”、"ideographic"和“bottom”。
fillText(),strokeText():这两个方法都可以接收4个参数:要绘制的文本字符串、x坐标、y坐标和和可选的最大像素宽度,文本最大像素宽度(尚未得到所有浏览器的支持,最早支持他的是firefox4)
绘制圆形
arc( x,y,半径,起始弧度,结束弧度,旋转方向,fasle)
x,y:起始位置
弧度与角度的关系:弧度=角度*Math.PI/180 2*Math.PI代表360度的弧度
旋转方向:顺时针(默认:false,逆时针:true)
注意点:
1.注意canvas画图的层次关系
2.注意合理利用beginPath()和closePath()
3.由于圆心每个角度的坐标点无法准确确定,因此用arc()化弧度,从而的得到刻度浮点,然后通过closePath闭合形成路径,填充,然后在填充一个较小的圆填充白色,从而产生刻度。
4.通过fillText(),strokeText()来打上时间点。
- <!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title>html5 canvas打造时钟</title>
- <style type="text/css">
- body,h3{margin:0;text-align:center}
- h3{
- padding:0;
- text-align:center;
- background:#333;
- font-size:1.5em;
- color:#fff;
- line-height:2em;
- text-shadow:0 0 10px rgba(0, 39, 245, 0.65);
- }
- #canvas{
- margin:20px 0;
- border:1px solid #bbb;
- background:#D6D5D5;
- }
- p{text-align:center;color:#bbb}
- </style>
- </head>
- <body>
- <h3>html5 canvas打造时钟</h3>
- <canvas id="canvas" width="600" height="600">
- 您的浏览器不支持canvas,请使用高级浏览器。
- http://blog.segmentfault.com/trigkit4/1190000000652925
- </canvas>
- <p>似水流年,且行且珍惜!</p>
- <script type="text/javascript">
- var canvas=document.getElementById('canvas');
- if(canvas.getContext){
- //对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。
- var context=canvas.getContext('2d');
- drawClock(context);
- setInterval(function(){drawClock(context)},1000);
- }
- function drawClock(canvas){
- var x=300, //钟表圆心坐标
- y=300,
- r=200; //钟表半径
- //清除画布
- canvas.clearRect(0,0,canvas.width,canvas.height);
- //修饰部分 即,建立一个白色的画布
- canvas.beginPath();
- //moveTo()将绘图游标移到(x,y)不画线
- canvas.moveTo(x,y);
- //arc(x,y,半径,起始弧度,结束弧度,旋转方向true|false)
- //arc 绘制 圆形 顺时针为false
- canvas.arc(x,y,r,0,360,false);
- //closePath()结束绘图
- canvas.closePath();
- canvas.fillStyle='#fff';
- canvas.fill();
- //镶嵌时钟数字
- var date=new Date(),//创建日期对象
- hours=date.getHours(),
- minutes=date.getMinutes(),
- seconds=date.getSeconds();
- var hoursValue=(-90 + hours*30+minutes/2)*Math.PI/180,
- minutesValue=(-90+minutes*6)*Math.PI/180,
- secondsValue=(-90+seconds*6)*Math.PI/180;
- canvas.beginPath();
- for(var i=0;i<60;i++){
- canvas.moveTo(x,y);
- canvas.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
- }
- canvas.closePath();
- canvas.stroke();
- canvas.beginPath();
- canvas.moveTo(x,y);
- canvas.fillStyle='#fff';
- canvas.arc(x,y,r*19/20,0,2*Math.PI,false);
- canvas.closePath();
- canvas.fill();
- canvas.beginPath();
- canvas.lineWidth=3;
- for(var i=0;i<12;i++){
- canvas.moveTo(x,y);
- canvas.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false)
- }
- canvas.closePath();
- canvas.stroke();
- canvas.beginPath();
- canvas.arc(x,y,r*18/20,0,2*Math.PI,false);
- canvas.closePath();
- canvas.fillStyle='#fff';
- canvas.fill();
- canvas.font="bold 16px Arial";
- canvas.textAlign='center';
- canvas.textBaseLine='middle';
- canvas.fillStyle='red';
- canvas.fillText('12',x,y-165,200);
- canvas.fillText('6',x,y+165,200);
- canvas.fillText('3',x+165,y+5,200);
- canvas.fillText('9',x-165,y+5,200);
- dyear=date.getFullYear(),
- dmonth=date.getMonth()+1,
- dDate=date.getDate(),
- weeks=date.getDay();
- canvas.fillText(dyear+'-'+dmonth+'-'+dDate+' '+dateWeek(weeks)+' '+hours+':'+toDouble(minutes)+':'+toDouble(seconds),x,y+60,200);
- canvas.lineWidth=5;
- canvas.beginPath();
- canvas.moveTo(x,y);
- canvas.arc(x,y,r*10/20,hoursValue,hoursValue,false);
- canvas.closePath();
- canvas.stroke();
- canvas.lineWidth=3;
- canvas.beginPath();
- canvas.moveTo(x,y);
- canvas.arc(x,y,r*14/20,minutesValue,minutesValue,false);
- canvas.closePath();
- canvas.stroke();
- canvas.lineWidth=1;
- canvas.beginPath();
- canvas.moveTo(x,y);
- canvas.arc(x,y,r*16/20,secondsValue,secondsValue,false);
- canvas.closePath();
- canvas.stroke();
- }
- function toDouble(num){
- num>=10 ? num=''+num : num='0'+num ;
- return num;
- }
- function dateWeek(data){
- switch(data){
- case 1:
- return '星期一';
- break;
- case 2:
- return '星期二';
- break;
- case 3:
- return '星期三';
- break;
- case 4:
- return '星期四';
- break;
- case 5:
- return '星期五';
- break;
- case 6:
- return '星期六';
- break;
- case 7:
- return '星期日';
- break;
- }
- }
- </script>
- </body>
- </html>
- 转自:http://www.w3cfuns.com/blog-5452328-5404265.html
canvas做的时钟,学习下的更多相关文章
- 用HTML5的canvas做一个时钟
对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...
- circle_clock 简单canvas实现圆弧时钟
渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_process_bar就像到了用来做时钟大概会比较有趣吧,所以就 ...
- 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...
- 一起用HTML5 canvas做一个简单又骚气的粒子引擎
前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...
- H5 canvas圆形的时钟
今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...
- 用Canvas做动画
之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过 ...
- 学习下新塘M0芯片的下载方法
编程方式多种多样,解释这几种方式的原理,方便做后续的回答: 一.脱机 脱机的意思就是脱离PC机,有很多芯片必须连接PC才能烧录,比如某些FPGA芯片.MCU芯片.NAND Flash芯片等.脱机和在线 ...
- 高手的C++学习忠告,虚心学习下~~[转载]
1.把C++当成一门新的语言学习(和C没啥关系!真的.): 2.看<Thinking In C++>,不要看<C++变成死相>: 3.看<The C++ Programm ...
- 算是休息了这么长时间吧!准备学习下python文本处理了,哪位大大有好书推荐的说下!
算是休息了这么长时间吧!准备学习下python文本处理了,哪位大大有好书推荐的说下!
随机推荐
- spring 中属性scope 的prototype(有状态)和singleton(无状态)
默认情况下,从bean工厂所取得的实例为Singleton(bean的singleton属性) Singleton: Spring容器只存在一个共享的bean实例, 默认的配置. Prototype: ...
- Bet(The 2016 ACM-ICPC Asia China-Final Contest 思路题)
题目: The Codejamon game is on fire! Fans across the world are predicting and betting on which team wi ...
- mac下Redis安装和使用
前言 本篇文章主要讲述了Mac下Redis的安装和使用的经验,并将python如何操作Redis做了简单介绍. 1. redis 安装 和启动 1.1 用brew安装 查看系统是否已经安装了Redis ...
- PAT 1123 Is It a Complete AVL Tree
An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...
- Spring核心技术(一)——IoC容器和Bean简介
IoC容器和Bean简介 这章包括了Spring框架对于IoC规则的实现.Ioc也同DI(依赖注入).而对象是通过构造函数,工厂方法,或者一些Set方法来定义对象之间的依赖的.容器在创建这些Bean对 ...
- JavaSE 学习笔记之集合框架(十八)
集合框架:,用于存储数据的容器. 特点: 1:对象封装数据,对象多了也需要存储.集合用于存储对象. 2:对象的个数确定可以使用数组,但是不确定怎么办?可以用集合.因为集合是可变长度的. 集合和数组的区 ...
- BNUOJ 2461 Anniversary party
Anniversary party Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Origi ...
- 2017北京ICPC C题 Graph
#1629 : Graph 时间限制:4000ms 单点时限:4000ms 内存限制:256MB 描述 The country contains N cities numbered from 1 to ...
- Python学习笔记 (2.1)标准数据类型之Number(数字)
Python3中,数字分为四种——int,float,bool,complex int(整型) 和数学上的整数表示没啥区别,没有大小限制(多棒啊,不用写整数高精了),可正可负.还可表示16进制,以 0 ...
- Hihocoder 1329(splay)
Problem 平衡树 Splay 题目大意 维护一个数列,支持三种操作. 操作1:添加一个数x. 操作2:询问不超过x的最大的数. 操作三:删除大小在区间[a,b]内的数. 解题分析 和上一题相比, ...