canvas绘制时钟表盘

关于canvas的API操作详情请阅读文档https://www.runoob.com/html/html5-canvas.html

先来看下效果图：

首先，需要绘制两个圆形作为表盘

var drawing=document.getElementById("drawing");
var context=drawing.getContext("2d");
context.beginPath();//绘制外圆
context.arc(100,100,99,0,2*Math.PI,false);//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);

然后，为表盘添加“指针”（时针，分针，秒针）

 //绘制秒针
context.moveTo(100,100);
context.lineTo(100,15);//绘制分针
context.moveTo(100,100);context.lineTo(35,100);//绘制时针
context.moveTo(100,100);
context.lineTo(100,45);//描边路径context.stroke();

最后，为表盘添加时间刻度

将时间刻度封装在一个 hous 方法中

 function hous(x,y,r,h,context){var gen3=Math.sqrt(3);var rs=0.5*r;switch(h){case 1:context.fillText("1",x+rs,y-rs*gen3);break;case 2:context.fillText("2",x+gen3*rs,y-rs);break;case 3:context.fillText("3",x+2*rs,y);break;case 4:context.fillText("4",x+gen3*rs,y+rs);break;case 5:context.fillText("5",x+rs,y+gen3*rs);break;case 6:context.fillText("6",x,y+2*rs);break;case 7:context.fillText("7",x-rs,y+gen3*rs);break;case 8:context.fillText("8",x-gen3*rs,y+rs);break;case 9:context.fillText("9",x-2*rs,y);break;case 10:context.fillText("10",x-gen3*rs,y-rs);break;case 11:context.fillText("11",x-rs,y-gen3*rs);break;case 12:context.fillText("12",x,y-2*rs);break;default:alert("请输入正确的时间刻度！");}}

然后调用

context.font="bold 14px Arial";context.textAlign="center";context.textBaseline="midden";for(var i=1;i<13;i++){hous(100,105,85,i,context);}

网页显示效果：

canvas绘制时钟表盘相关推荐

canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
使用canvas绘制时钟
使用canvas绘制时钟什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
canvas绘制时钟刻度表
canvas绘制时钟刻度表 1.首先看一下效果图 2.基本知识点 canvas.drawText:绘制文字,注意基线的位置为文字的左下角y轴所在的线 canvas.drawLine:绘制线段,指定起始 ...
html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...
Android自定义实现绘制时钟表盘
效果图: 实现步骤: 绘制表盘[刻度,数字] 绘制指针让指针走起来~ 具体如下: 绘制表盘: 首先需要计算出刻度的起点和终点坐标值,这里我们通过构建两个半径不同的同心圆,大圆半径减小圆半径,就可以得 ...
html5的canvas绘制时钟
为什么80%的码农都做不了架构师?>>> 最近一直在学习html5,学到了html5的canvas标签,这个画布真的是很强大,它有对应的javascript的api的支持,你可 ...
Canvas绘制一个时钟
Canvas绘制一个时钟 Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处 ...
Canvas之绘制时钟
使用canvas绘制时钟效果创建一个canvas之后拥有三要素: id--画布的唯一标识 width--画布的宽 height--画布的高 **强烈建议不要使用css修改画布的宽高,因为画布的宽高表 ...

canvas绘制时钟表盘

canvas绘制时钟表盘相关推荐

最新文章

热门文章