最近闲下来,开始了HTML5的入门之旅。跟着某视频(避免广告嫌疑)做了两个简单的canvas例子。此处为简易时钟实例。
PS: 例子为实验性例子,欢迎批判~~~~
一、实现逻辑
1、先画出表盘:最外端的圆、时刻度、分秒刻度
2、使用canvas的画布旋转,分别画出时针、分针、秒针(含秒针外端圆点)
3、定时清空画布,并重新绘制时针。
二、代码展示
1、效果图
2、以下为代码:
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> Canvas-时钟 </title> </head> <body> <canvas width="500" height="500" id="clock" >您的浏览器不支持<code>canvas</code>标签!</canvas> <script> //获取画布DOM var dCanvas = document.getElementById('clock'); //设置绘图环境.注意只能用小写“2d” var paper = dCanvas.getContext('2d'); var CX=250,CY=250; //画表盆(蓝色) clockHandler(); window.setInterval(clockHandler,1000); function drawClockBg(_paper){ _paper.lineWidth=10; _paper.strokeStyle="blue"; _paper.beginPath(); _paper.arc(CX,CY,200,0,360,false);//最后一个参数,表示是否顺时针画 _paper.stroke(); _paper.closePath(); }; /** * 画时针刻度 * **/ function drawClockHour(_paper){ for(var i=0;i<12;i++){ _paper.save(); _paper.strokeStyle="black"; _paper.translate(CX,CY); _paper.rotate(i*30*Math.PI/180); _paper.beginPath(); _paper.moveTo(0,-175); _paper.lineTo(0,-195); _paper.stroke(); _paper.closePath(); _paper.restore(); } }; /** * 画秒/分刻度 * **/ function drawClockSecond(_paper){ for(var i=0;i<60;i++){ if(i%5===0)continue; _paper.save(); _paper.lineWidth=4; _paper.strokeStyle="black"; _paper.translate(CX,CY); _paper.rotate(i*6*Math.PI/180); _paper.beginPath(); _paper.moveTo(0,-185); _paper.lineTo(0,-195); _paper.stroke(); _paper.closePath(); _paper.restore(); } }; /** * 画时针 **/ function drawClockHourLine(_paper,_hour){ _paper.save(); _paper.lineWidth=10; _paper.strokeStyle="black"; _paper.translate(CX,CY); _paper.rotate(_hour*30*Math.PI/180); _paper.beginPath(); _paper.moveTo(0,-85); _paper.lineTo(0,5); _paper.stroke(); _paper.closePath(); _paper.restore(); }; /** * 画分针 **/ function drawClockMinuteLine(_paper,_minute){ _paper.save(); _paper.lineWidth=6; _paper.strokeStyle="black"; _paper.translate(CX,CY); _paper.rotate(_minute*6*Math.PI/180); _paper.beginPath(); _paper.moveTo(0,-125); _paper.lineTo(0,10); _paper.stroke(); _paper.closePath(); _paper.restore(); }; /** * 画秒针 **/ function drawClockSecondLine(_paper,_second){ _paper.save(); _paper.lineWidth=3; _paper.strokeStyle="red"; _paper.translate(CX,CY); _paper.rotate(_second*6*Math.PI/180); //秒针线 _paper.beginPath(); _paper.moveTo(0,-185); _paper.lineTo(0,15); _paper.stroke(); _paper.closePath(); //初始化秒针圆点 drawBaseCircle(_paper,0,-160,"yellow"); _paper.restore(); }; /** * 画圆点 表盘圆点、秒针外端圆点 **/ function drawBaseCircle(_paper, _x, _y , fs){ if(typeof fs == 'undefined') fs = "gray"; _paper.beginPath(); _paper.fillStyle=fs; _paper.arc(_x,_y,5,0,360,false); _paper.fill(); _paper.closePath(); } /** * 定时处理时钟指针 **/ function clockHandler(){ //清空已画的内容 paper.clearRect(0,0,500,500); //画表盆(蓝色) drawClockBg(paper); //画时刻度 drawClockHour(paper); //画秒刻度 drawClockSecond(paper); //初始化时间 var nowDate = new Date(); //获取当前时间的小时数 var hour = (nowDate.getHours()%12) + parseFloat(nowDate.getMinutes()/60,2); //获取当前时间的分钟数 var minute = nowDate.getMinutes() + parseFloat(nowDate.getSeconds()/60,2); //获取当前时间的秒数 var second = nowDate.getSeconds(); //初始化时针 drawClockHourLine(paper,hour); //初始化分针 drawClockMinuteLine(paper,minute); //初始化秒针 drawClockSecondLine(paper,second); //初始化中心圆点 drawBaseCircle(paper,CX,CY); }; </script> </body> </html>
三、后记
1、代码在FireFox 32.0.3上,测试无误!
相关推荐
15款基于canvas的时钟特效,html5中的canvas制作炫酷时钟
基于canvas的粒子时钟动画,用浏览器打开就能看到效果
《基于jQuery和Canvas的简洁时钟效果实现详解》 在网页设计中,动态时钟效果是一种常见的视觉元素,能够为用户界面增添互动性和趣味性。本文将深入探讨一个基于jQuery和HTML5 Canvas技术的“jQuery.clock-canvas”...
总结来说,这个JavaScript基于Canvas的时钟组件实例展示了如何利用Canvas API创建动态图形。通过学习这个例子,我们可以理解如何使用JavaScript控制画布元素,绘制图形,以及如何结合实际时间和动画效果来创建交互式...
理解并实践这些概念,你就能创建出自己的HTML5 Canvas 动画时钟,无论是作为学习项目还是网页设计中的实用元素,都是一个很好的实践。 通过学习和探索这个主题,你不仅可以提升HTML5和JavaScript的技能,还能对Web...
在这个项目中,我们将深入探讨如何利用JavaScript和Canvas API构建一个实时更新的数字时钟。 首先,我们需要在HTML页面中创建一个canvas元素,并为其设置id以便在JavaScript中引用: ```html <canvas id="clock" ...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉效果。...这个例子展示了Canvas的灵活性和创造力,对于想要提升前端技能的开发者来说是一个很好的实践项目。
15款基于canvas时钟特效.zip
HTML5的Canvas是一个强大的绘图工具,允许开发者在网页上绘制图形、动画,甚至复杂的交互式体验。...通过学习和实践这个项目,开发者不仅可以深入理解Canvas的绘图机制,还能提升动态效果和用户体验的设计能力。
基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+...
基于html的canvas的时钟源码
10. **学习价值**:这个压缩包对于初学者而言,是一个极好的实践案例,可以深入理解canvas绘图、JavaScript时间处理以及动态效果的实现。 总结来说,"HTML5 canvas数字时钟15种样式代码.zip"是一个展示HTML5 canvas...
HTML5 Canvas是一个强大的Web绘图工具,...总之,HTML5 Canvas绘制时钟是一个很好的实践项目,它展示了Canvas API的强大功能和灵活性。通过这个例子,开发者可以深入学习Canvas绘图原理,同时提升JavaScript编程技巧。
HTML5 Canvas 制作时钟 HTML5 的 Canvas 元素提供了一个强大的绘图功能,通过使用 ...在这篇文章中,我们学习了如何使用 Canvas 元素来绘制一个时钟,包括绘制时钟的基本架构、小时刻度、分钟刻度和时钟的指针。
基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar ...
微信小程序基于canvas实现纯色背景抠图功能,值得一看和学习;微信小程序基于canvas实现纯色背景抠图功能,值得一看和学习;微信小程序基于canvas实现纯色背景抠图功能,值得一看和学习;微信小程序基于canvas实现...
在这个“html5基于canvas实现的简易圆形本地时钟效果源码.zip”中,我们可以深入学习如何利用HTML5的Canvas API来创建一个动态的、实时更新的本地时间显示。 Canvas API是HTML5提供的一种在网页上进行2D图形绘制的...
在这个“HTML5 canvas时钟效果.zip”压缩包中,包含了一个使用Canvas API实现的时钟显示功能。这个时钟不仅绘制了表盘、时针、分针和秒针,还展示了数字时间,为网页增添了一种实用且动态的元素。 1. **Canvas基本...
在这个场景下,我们将讨论如何利用canvas来实现一个实时更新的时钟功能。 首先,我们需要在微信小程序的页面配置文件(如`page.json`)中声明canvas组件,设置其在页面中的位置和大小。例如: ```json { ...
该时钟基于Canvas实现,充分利用了Canvas2D绘图API的优势,让前端可视化技能更上一层楼,同时它是浏览器提供的一种可以直接用代码在一块平面的“画布”上绘制图形的 API,使用它来绘图更像是传统的“编写代码”,...