用php写一个时钟效果,利用html 5制作一个简单的时钟效果

骑猪看日落 2023-01-15 10:26 179阅读 0赞

![37a50fe9642348f4082f4d342d038335.png][]

我们先来看看最终效果：

![9181896cb5cdf03ce399f27562719db8.png][]

看上去很简单的一个时钟效果，但是具体实现代码仍然包含了一些重点知识。

下面是具体的实现代码：

(提示：要特别注意fillText drawhand 的使用及其中角度的计算)

Document : 时钟

Created on : 2016-5-19, 9:49:29

Author : Administrator

\--%>

JSP Page

canvas\{

border: 1px solid black;

(function()\{

//cavas元素对象

var canvas=null;

//canvas的3d上下文

var ctx=null;

//cavan的尺寸

var cw=0;

var ch=0;

/\*\*

\* 页面导入时的事件处理

\*/

window.addEventListener("load",function()\{

canvas=document.getElementById("sample");

ctx=canvas.getContext("2d");

cw=parseInt(canvas.width);

ch=parseInt(canvas.height);

ctx.translate(cw/2, ch/2);

//绘制时钟

draw\_watch();

\},false);

/\*\*

\* 绘制时钟

\*/

function draw\_watch()\{

//清空Canvas

ctx.clearRect(-cw/2,-ch/2,cw,ch);

//计算针的最大长度

var len=Math.min(cw, ch)/2;

//绘制刻度盘

var tlen=len\*0.85;

ctx.font="14px 'Arial'";

ctx.fillStyle="black";

ctx.textAlign="center";

ctx.textBaseLine="middle";

for(var i=0; i<12; i++)\{

var tag1=Math.PI\*2\*(3-i)/12;

var tx=tlen \* Math.cos(tag1);

var ty=-tlen \* Math.sin(tag1);

ctx.fillText(i,tx,ty);

//获取当前的时分秒

var d=new Date();

var h=d.getHours();

var m=d.getMinutes();

var s=d.getSeconds();

if(h >12 )\{

h=h-12;

//绘制时针

var angle1 = Math.PI \* 2 \*(3 - (h+ m/60))/12;

var length1=len \* 0.5;

var width1=5;

var color1="\#000000";

drawhand(angle1,length1,width1,color1);

//绘制分针

var angle2 = Math.PI \* 2 \*(15 - (m+ s/60))/60;

var length2=len \* 0.7;

var width2=3;

var color2="\#555555";

drawhand(angle2,length2,width2,color2);

//绘制秒针

var angle3 = Math.PI \* 2 \*(15 - s)/60;

var length3=len \* 0.8;

var width3=1;

var color3="\#aa0000";

drawhand(angle3,length3,width3,color3);

//设置timer

setTimeout(draw\_watch,1000);

/\*\*

\* 针绘制函数

\*/

function drawhand(angle,len,width,color)\{

//计算针端的坐标

var x=len\*Math.cos(angle);

var y=-len \* Math.sin(angle);

//绘制针

ctx.strokeStyle=color;

ctx.lineWidth=width;

ctx.lineCap="round";

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(x,y);

ctx.stroke();

\})();

[37a50fe9642348f4082f4d342d038335.png]: /images/20221022/f41af3277a9548ac81720541eb081872.png
[9181896cb5cdf03ce399f27562719db8.png]: /images/20221022/3b5f1b71de6f4628b4af7e1585f6c3b8.png

用php写一个时钟效果,利用html 5制作一个简单的时钟效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关用matlab绘制一个时钟

相关学习原生JS时钟效果

相关用php写一个时钟效果,利用html 5制作一个简单的时钟效果

相关动态时间html在线,HTML写一个网页动态时钟

相关模拟实现一个时钟界面效果

相关 React实现时钟效果

相关使用canvas实现简单的时钟效果

相关用JavaScript的setInterval（）实现动态时钟效果

相关 h5 Canvas时钟制作

相关 JS实现简单时钟效果