用canvas模仿iPhone时钟

最新推荐文章于 2023-04-08 15:31:05 发布

Jocs

最新推荐文章于 2023-04-08 15:31:05 发布

阅读量214

点赞数

分类专栏： html5 文章标签： html5 javascript canvas ViewUI

本文链接：https://blog.csdn.net/magiclr/article/details/84653910

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

[color=darkred][/color]自学前段开发也有一个月了，最近在学html5中的新标签“canvas”，发现canvas不仅仅是一个标签，更是一个能够制作动画效果的画布，于是模仿iPhone中时钟的效果，自己做了一个网页版的时钟，还只是一个雏形，以后还会增加一些自己的创意“抛弃圆形表盘”，“数字用图片或其它形状呈现”，“时针、分钟、秒针也用其它形状代替”，以我现在的基础也许还没有能力做出来，不过我会努力的。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>炫丽的倒计时效果</title>
</head>
<body>
<canvas id="canvas" style="display: block; margin:50px auto;">
您的浏览器不支持canvas绘图，请更换浏览器。
</canvas>

<script type="text/javascript">
var WINDOW_WIDTH=400;
var WINDOW_HEIGHT=400;

window.οnlοad=function(){

var canvas=document.getElementById("canvas");
if(canvas.getContext("2d")){

var context=canvas.getContext("2d");

}
canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT;

render(context);
};

function numberToDegree(num){

return ((num*6-90)*2*Math.PI/360);
}

function computePositionByLenghtAndDegree(len,deg){

return {
x:len*Math.cos(deg),
y:len*Math.sin(deg)
}

}

function render(cxt){
var myDate=new Date();
var hour=myDate.getHours()%12;
var minute=myDate.getMinutes();
var second=myDate.getSeconds();

//cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);

//绘制表盘

cxt.fillStyle="#000000";
cxt.beginPath();
cxt.translate(200,200);
cxt.arc(0,0,199,0,2*Math.PI,true);
cxt.closePath();

cxt.fill();

//绘制时钟上面的1~12数字。
cxt.fillStyle = '#ffffff';
cxt.font="60px 'Bodoni MT'";
cxt.textAlign="center";
cxt.textBaseline="middle";

cxt.fillText("12",0,-150);
cxt.fillText("1",150*Math.cos(Math.PI/3),-150*Math.sin(Math.PI/3));
cxt.fillText("2",150*Math.cos(Math.PI/6),-150*Math.sin(Math.PI/6));
cxt.fillText("3",150,0);
cxt.fillText("4",150*Math.cos(Math.PI/6),150*Math.sin(Math.PI/6));
cxt.fillText("5",150*Math.cos(Math.PI/3),150*Math.sin(Math.PI/3));
cxt.fillText("6",0,150);
cxt.fillText("7",-150*Math.cos(Math.PI/3),150*Math.sin(Math.PI/3));
cxt.fillText("8",-150*Math.cos(Math.PI/6),150*Math.sin(Math.PI/6));
cxt.fillText("9",-150,0);
cxt.fillText("10",-150*Math.cos(Math.PI/6),-150*Math.sin(Math.PI/6));
cxt.fillText("11",-150*Math.cos(Math.PI/3),-150*Math.sin(Math.PI/3));

//绘制时针，分针，秒针。
var hourDegree=numberToDegree(hour*5+Math.floor(minute/12));
var minuteDegree=numberToDegree(minute);
var secondDegree=numberToDegree(second);

var hourBeginPot=computePositionByLenghtAndDegree(8,(hourDegree+Math.PI));
var hourEndPot=computePositionByLenghtAndDegree(80,hourDegree);
var minuteBeginPot=computePositionByLenghtAndDegree(10,minuteDegree+Math.PI);
var minuteEndPot=computePositionByLenghtAndDegree(100,minuteDegree);
var secondBeginPot=computePositionByLenghtAndDegree(15,secondDegree+Math.PI);
var secondEndPot=computePositionByLenghtAndDegree(120,secondDegree);

cxt.strokeStyle="#fff";
cxt.beginPath();
cxt.moveTo(hourBeginPot.x,hourBeginPot.y);
cxt.lineTo(hourEndPot.x,hourEndPot.y);
cxt.lineWidth=6;
cxt.closePath();
cxt.stroke();

cxt.strokeStyle="#fff";
cxt.beginPath();
cxt.moveTo(minuteBeginPot.x,minuteBeginPot.y);
cxt.lineTo(minuteEndPot.x,minuteEndPot.y);
cxt.lineWidth=3;
cxt.closePath();
cxt.stroke();
//绘制秒针
cxt.strokeStyle="#ff0000";
cxt.beginPath();
cxt.moveTo(secondBeginPot.x,secondBeginPot.y);
cxt.lineTo(secondEndPot.x,secondEndPot.y);
cxt.lineWidth=2;
cxt.closePath();
cxt.stroke();

cxt.translate(-200,-200);

setTimeout(
function(){render(cxt)}
,50);

}

</script>

</body>
</html>

Jocs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用canvas模仿iPhone时钟

[color=darkred][/color]自学前段开发也有一个月了，最近在学html5中的新标签“canvas”，发现canvas不仅仅是一个标签，更是一个能够制作动画效果的画布，于是模仿iPhone中时钟的效果，自己做了一个网页版的时钟，还只是一个雏形，以后还会增加一些自己的创意“抛弃圆形表盘”，“数字用图片或其它形状呈现”，“时针、分钟、秒针也用其它形状代替”，以我现在的基础也许还没有能力...
复制链接

扫一扫