您的位置:首页 > Web前端 > HTML5

利用canvas画出动态时钟

2017-07-17 20:02 267 查看
最近在学习html5,其中的canvas显得尤为重要,能够实现很多功能,画出很多漂亮的东西,下面记录一下我学到的第一个canvas实例:利用canvas画出时钟。
该时钟是一个动态的图,能够显示当前的时间。
**首先我们要知道它的基本思路**:如何画出时钟上的数字,以及时针,分针,秒针,接下来的时钟的圆弧我们可以直接用HTML5的API函数画出即可。

**弧度=弧长/半径,**一个圆的弧长为2πR,角度为360°,可以得出:**1度的弧长=2πr/360,1度的弧度=2π/360**。
下面来画一个圆:定义画布标签并在js中获取这个画布,随后定义一个函数:drawBackground:


window.onload=function()
{
var can=document.getElementById('myCanvas');
var ctx=can.getContext('2d');
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width*0.5;
var rem=width/200;

function drawBackground()
{   ctx.save();
ctx.translate(r,r);//改变图形的中心点为画布的中心点
ctx.font= 18*rem + 'px Arial';//设置字体大小
ctx.textAlign='center';//设置文本的对齐方式
ctx.textBaseline='middle';//设置文本的基准线
ctx.beginPath();
ctx.lineWidth=4*rem;//设置文本的线宽
ctx.arc(0,0,r-ctx.lineWidth,0,Math.PI*2,false);//画圆
ctx.stroke();
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];//定义数组存放时钟上的12个数字

hourNumbers.forEach(function(number,i)//遍历这个数组
{  var rad=2*Math.PI/12*i;       //设置弧度
var x=Math.cos(rad)*(r-30*rem);//设置数字的坐标
var y=Math.sin(rad)*(r-30*rem);
ctx.fillText(number,x,y);

});
for(var i=0;i<60;i++)//设置秒点
{
var rad=2*Math.PI/60*i;//设置间隔的弧度
var x=Math.cos(rad)*(r-18*rem);//设置点的坐标
var y=Math.sin(rad)*(r-18*rem);
ctx.beginPath();
if(i%5===0)//如果这个点对应数字

{
ctx.fillStyle='#000';//填充黑色

ctx.arc(x,y,2*rem,0,2*Math.PI,false);//画圆

}
else
{
ctx.fillStyle='#ccc';//填充灰色
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
ctx.fill();

}
}


运行结果如下:



接下来我们来画时钟上的针:定义函数drawHour,drawMinute,drawSecond:

function drawHour(hour,minute)
{
ctx.save();
ctx.beginPath();
ctx.lineWidth=6*rem;
var rad=2*Math.PI/12*hour;//设置时针弧度

var mrad=2*Math.PI/12/60*minute; //设置分针的弧度
ctx.rotate(rad+mrad);//把两个弧度相加能够实现例如4:30,时针指向4,5之间,而不是指向4
ctx.lineCap="round";//设置顶端的样式为圆形的弧度
ctx.moveTo(0,10*rem);//画针
ctx.lineTo(0,-r/2);//时针的长度为半径的一般
ctx.stroke();
ctx.restore();

}


function drawMinute(minute)
{
ctx.save();
ctx.beginPath();
ctx.lineWidth=3*rem;
var rad=2*Math.PI/60*minute;
ctx.lineCap="round";

ctx.rotate(rad);
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r+36*rem);
ctx.stroke();
ctx.restore();

}


function drawSecond(second)
{
ctx.save();
ctx.beginPath();
ctx.lineWidth=3*rem;
ctx.fillStyle="red";
var rad=2*Math.PI/60*second;
ctx.rotate(rad);
ctx.moveTo(-2*rem,20*rem);
ctx.lineTo(2*rem,-r+18*rem);
ctx.lineTo(1,-r+16*rem);
ctx.lineTo(-1,-r+16*rem);
ctx.fill();
ctx.restore();

}


最后画一个白色的中心圆点把针都固定起来,添加函数drawDot:

function drawDot()
{
ctx.save();
ctx.beginPath();
ctx.arc(0,0,3*rem,0,Math.PI*2);
ctx.fillStyle="white";
ctx.fill();
ctx.restore();
}


到此我们实现了时钟的静态效果,假设时间为4:30,15秒,效果图如下:

drawBackground();
drawHour(4,30);
drawMinute(30);
drawSecond(15);
drawDot();




接下来我们来实现时钟的动态效果,让它获取当前的时间,并让它的时针都动起来,我们建立函数draw:

function draw()
{  ctx.clearRect(0,0,width,height) ;//清楚画布内容,否则会发生针的位置不会刷新
var now = new Date();//获取当前时间
var Hour=now.getHours();
var Minute=now.getMinutes();
var Second=now.getSeconds();
drawBackground();//获取背景

drawHour(Hour,Minute);//调用函数画出时针
drawMinute(Minute);
drawSecond(Second);
drawDot();
ctx.restore();

}
draw();
setInterval(draw,1000);//设置一个定时器,让它一秒执行一次draw函数,可以实现动态效果




最后我们还要注意一点,改变画布的宽高,会导致比例失调,为此我们在函数开始时定义了一个比例变量rem,
var rem=width/200;
在每个设置大小的变量后面都乘以rem这样,放大画布时钟也不会失真。

last but not least希望能够帮助到你们,让我们一起努力~~
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  canvas 实例 html5