昨天在慕课网学着用canvas绘制时钟(去看看),避免以后忘记就在这里做个记录。
先上个效果图吧:
这张图是静态的,实际上它是一个动态的时钟, 像平常看到的时钟一样,会一格一格走。
然后是需要掌握的数学知识:
知识点1:边与角的关系
这个是直角三角形中边与角的关系,比较好理解。不多说。
知识点2:弧度与角度的关系
通过以上两个知识点计算(x,y)的坐标:
那个角为什么是30度?一个圆总共是360度,一个表盘有12个小时也就是将360度平分为12分,那么每一份即为30度。
x = Math.cos(rad)*r
y = Math.sin(rad)*r
其中r为圆的半径,rad=2*Math.PI/360*30=2*Math.PI/12,即30度角对应的弧度数
知识点3:使用canvas绘制圆的开始角与结束角
这个知识点知道就好,因为后面的代码中有根据canvas的这个特性专门设置的代码顺序。
好啦,难的知识点就这些啦,其他有不懂的,可以去这个链接查看:HTML 5 Canvas 参考手册
具体代码如下:
页面结构:
<body> <div class="canvasDiv"> <canvas id="clock" width="300" height="300"> 您的浏览器不支持canvas,请换个浏览器试试 <!--这句话在支持canvas的浏览器中会被忽略,不支持的则会显示出来--> </canvas> </div> </body>
JS代码(直接写在body中):
var clockCanvas = document.getElementById("clock"); var cxt = clockCanvas.getContext("2d");//获取canvas的上下文环境 var width = cxt.canvas.width;//canvas的宽度 var height = cxt.canvas.height;//canvas的高度 var radius = width / 2;//圆的半径 var rem = width/300;//以canvas的宽度为300,外圆位10作为标准,计算比例 var lineWidth = 10*rem;//外圆的边线宽度 var r = radius - 30*rem;//小圆半径(各个小时数所在的圆) var r2 = radius - 18*rem;//小圆半径(秒针跳动时对应的60个点所在的圆) var r3 = 3*rem;//秒针跳动时对应的60个点的圆半径 var r4 = -radius+20*rem; var fontSize = 20*rem; console.log(clockCanvas+"\t"+cxt+"\t"+width+"\t"+height+"\t"+radius); //小时数(因为画圆时起始角是从表盘中3点的位置开始画的,所以将开始位置设置成3) var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2]; window.onload=function(){ draw(); window.setInterval(draw,1000);//一秒钟绘制一次 } //该方法用来绘制表盘 function drawBackground(){ cxt.save(); cxt.translate(radius,radius); //重新定位圆点坐标,定位到画布的中心 cxt.beginPath(); //1、画外圆 cxt.lineWidth = lineWidth; cxt.arc(0,0,radius-lineWidth/2,0,2*Math.PI,false);///(radius-lineWidth/2)??? cxt.stroke();//绘制 //2、绘制小时数 hourNumbers.forEach(function (number,i){ //计算弧度 var rad = 2*Math.PI/12*i;//(2*Math.PI/12):每一度的弧度数 //计算每个数字的位置 var x = Math.cos(rad)*r;//cos30%=b/c ===>b=cos30%*c var y = Math.sin(rad)*r;//sin30%=a/c ===>a=sin30%*c //绘制数字 cxt.font=fontSize+"px Arial";//设置字体 cxt.textAlign="center";//设置文本内容的当前对齐方式:垂直居中(详解链接 :http://www.w3school.com.cn/tags/canvas_textalign.asp) cxt.textBaseline="middle";//设置在绘制文本时使用的当前文本基线:这里设置为水平居中(详解链接:http://www.w3school.com.cn/tags/canvas_textbaseline.asp) cxt.fillText(number,x,y);//绘制数字 }); //3、绘制秒针跳动时对应的60个点 for(var i=0;i<60;i++){ var rad = 2*Math.PI/60*i;//计算弧度 var x = Math.cos(rad)*r2; var y = Math.sin(rad)*r2; cxt.beginPath(); //当是小时数时小圆点为黑色,其他点为灰色 if(i%5==0){ cxt.fillStyle="#000"; }else{ cxt.fillStyle="#ccc"; } cxt.arc(x,y,r3,2*Math.PI,false); cxt.fill(); } cxt.closePath(); } /** *该方法用来绘制时针 *@param hour:几点 *@param minute:分钟 */ function drawHour(hour,minutes){ cxt.save(); cxt.beginPath(); var rad = 2*Math.PI/12*hour;//计算需要旋转的弧度 var mrad = 2*Math.PI/12/60*minutes;//2*Math.PI/12:标识一个时针点的弧度数,2*Math.PI/12/60:一个小时包括60分钟,也就是这一个弧度数被60个点平分 cxt.rotate(rad+mrad); cxt.lineWidth = 6*rem; cxt.lineCap = "round";//时针顶端的样式 cxt.moveTo(0,10); cxt.lineTo(0,-radius/2); cxt.stroke(); cxt.restore(); cxt.closePath(); } /** *该方法用来绘制分针 *@param minute:几分 */ function drawMinute(minute){ cxt.save(); cxt.beginPath(); var rad = 2*Math.PI/60*minute;//计算需要旋转的弧度 cxt.rotate(rad); cxt.lineWidth = 5*rem; cxt.lineCap = "round";//时针顶端的样式 cxt.moveTo(0,10); cxt.lineTo(0,-radius+42*rem); cxt.stroke(); cxt.restore(); cxt.closePath(); } /** *该方法用来绘制秒针 *@param second:几秒 */ function drawSecond(second){ cxt.save(); cxt.beginPath(); cxt.fillStyle="#c14543"; var rad = 2*Math.PI/60*second;//计算需要旋转的弧度 cxt.rotate(rad); //秒针慢慢变小 cxt.moveTo(-2,20*rem); cxt.lineTo(2,20*rem); cxt.lineTo(1,r4); cxt.lineTo(-1,r4); cxt.fill(); cxt.restore(); cxt.closePath(); } /** *该方法用来绘制固定时针、分针和秒针的中心圆点 **/ function drawDot(){ cxt.beginPath(); cxt.fillStyle="#fff"; cxt.arc(0,0,4*rem,2*Math.PI,false); cxt.fill(); cxt.closePath(); } //该方法用来动态的绘制时钟 function draw(){ cxt.clearRect(0,0,width,height);//避免时针、分针、秒针每次跳动时前一帧依旧存在 var date = new Date(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); drawBackground(); drawHour(hour,minute); drawMinute(minute); drawSecond(second); drawDot(); cxt.restore(); }
最后感谢老师的分享!
相关推荐
这篇博文“HTML5 Canvas绘制时钟”旨在介绍如何利用Canvas API创建一个实时更新的数字或指针式时钟。我们将深入探讨Canvas的基础知识、相关API以及实现时钟的具体步骤。 1. HTML5 Canvas基础 HTML5 Canvas是一个二...
// 绘制时钟背景 ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2 - 10, 0, Math.PI * 2); ctx.fillStyle = 'white'; ctx.fill(); // 绘制数字 for (let i = 1; i ; i++) ...
接下来,我们将在`clock.js`中编写JavaScript代码来绘制时钟: ```javascript document.addEventListener('DOMContentLoaded', function() { var canvas = document.getElementById('clock'); var ctx = canvas....
接下来定义`drawClock`方法,用于在canvas上绘制时钟: ```javascript drawClock() { const ctx = this.data.ctx; const now = new Date(); // 清除画布 ctx.clearRect(0, 0, 300, 300); // 绘制时钟圆盘 ...
"用canvas画的会走的钟"是一个典型的使用Canvas技术实现的互动性时钟示例,它不仅展示出Canvas的基本绘图功能,还涉及到时间同步和动画更新的知识点。以下是对这个主题的详细说明: 1. **Canvas API基础**: - `...
HTML5 Canvas 制作时钟 HTML5 的 Canvas 元素提供了一个强大的绘图功能,通过使用 ...在这篇文章中,我们学习了如何使用 Canvas 元素来绘制一个时钟,包括绘制时钟的基本架构、小时刻度、分钟刻度和时钟的指针。
3. **绘制时钟**: - 首先,我们需要在canvas上绘制一个圆形作为时钟的表面,可以使用`arc()`函数。 - 然后,绘制时针、分针和秒针,利用`rotate()`函数调整它们相对于中心点的角度,根据实际时间计算角度。 - ...
使用canvas绘制的实时时钟
在本篇博客“canvas学习(三):炫丽的电子时钟”中,作者通过HTML5的canvas元素展示了如何创建一个动态且具有视觉吸引力的电子时钟。canvas是HTML5中用于绘制图形的一个重要组成部分,它允许开发者用JavaScript来...
- `fillText()`和`strokeText()`方法用于在Canvas上绘制文本,这是数字时钟的基础。 2. **时钟结构**: - 时钟通常由小时、分钟和秒针组成,每根指针有不同的长度和旋转速度。 - 使用`setInterval()`函数定时...
2. 数字时钟: 数字时钟是通过获取当前时间(使用JavaScript的`Date`对象)并将其格式化为适合显示的字符串。例如,可以使用`getHours()`, `getMinutes()`, `getSeconds()`方法获取小时、分钟和秒,然后用`padStart...
js目录下的JavaScript文件则包含了时钟的逻辑代码,包括时间的获取、计算、以及Canvas上的图形绘制和动画效果。img目录可能包含了时钟的一些静态图像资源,如指针或数字的图片。related目录可能包含了与项目相关的...
4. **绘制时钟**:接下来,我们需要用Canvas API来绘制时钟的数字和指针。首先,获取`<canvas>`元素的`2D渲染上下文`(`context`)。 ```javascript var canvas = document.getElementById('myClock'); var context...
Canvas元素作为画布,通过JavaScript的绘图命令动态绘制时钟的指针和数字,实现时钟的实时转动效果。 在实现过程中,jQuery首先获取Canvas元素,并创建一个2D渲染上下文。接着,插件会设置定时器,每隔一定时间...
- 在回调函数中,更新时间,重新绘制时钟,并再次调用 `requestAnimationFrame`。 7. **样式和交互**: - 可以通过CSS控制 `canvas` 的样式,如大小、边框、背景等。 - 为了增加互动性,还可以添加鼠标悬停、...
- `getHours()`, `getMinutes()`, `getSeconds()`: 获取当前小时、分钟和秒数,这些值将用于绘制时钟指针的位置。 3. **坐标系统与旋转**: - `(x, y)`坐标:Canvas的坐标系统从左上角开始,`x`是水平轴,`y`是...
这包括清除画布,计算角度,以及绘制时钟的各个部分(小时、分钟、秒钟和数字)。以下是基本的`drawClock`函数结构: ```javascript function drawClock() { ctx.clearRect(0, 0, canvas.width, canvas.height); ...
绘制时钟Canvas需要的知识点,案例 绘制时钟Canvas,源代码。精美手表、时钟案例。
这个时钟不仅绘制了表盘、时针、分针和秒针,还展示了数字时间,为网页增添了一种实用且动态的元素。 1. **Canvas基本概念** - Canvas是HTML5的一个重要特性,它是一个矩形区域,可以通过JavaScript的绘图命令在...