Canvas绘制时钟

Posted ning123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Canvas绘制时钟相关的知识,希望对你有一定的参考价值。

准备工作 

首先,找一张时钟的图片,就是下面这张了。

技术图片

——来自bigger than bigger的dribbble网站,图片来源(侵删)

第一步:创建Canvas标签

然后就开始用canvas实现这个逼格满满的时钟吧。在html代码中插入canvas标签

<canvas id="canvas" width="400" height="400"></canvas>

由于浏览器对HTML5标准支持不一致,所以,通常在<canvas>内部添加一些说明性HTML代码,如果浏览器支持Canvas,它将忽略<canvas>内部的HTML,如果浏览器不支持Canvas,它将显示<canvas>内部的HTML:

<canvas id="test-stock" width="300" height="200">
    <p>Current Price: 25.51</p>
</canvas>

在使用Canvas前,用canvas.getContext来测试浏览器是否支持Canvas:

var canvas = document.getElementById(‘test-canvas‘);
if (canvas.getContext) 
    console.log(‘你的浏览器支持Canvas!‘);
 else 
    console.log(‘你的浏览器不支持Canvas!‘);

 

第二步:在javascript中创建画布对象

js文件中创建画布(假设我们使用的都是现代浏览器)。

function clock() 
  var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘);

先来绘制时钟表盘,我们看到这张图是带有光线阴影效果的,画成一样难度太高。于是就用颜色的渐变来让时钟看起来稍微立体一点。在canvas中用createLinearGradient来创建一个新的渐变,并用addColorStop上色,最后把颜色赋给strokeStyle。详见运用样式与颜色 by MDN

//绘制表盘底色
ctx.translate(200, 200); //将坐标原点移到画布中心
ctx.rotate(-Math.PI/2); //将坐标轴逆时针旋转90度,x轴正方向对准12点方向
var lingrad = ctx.createLinearGradient(150, 0, -150, 0); lingrad.addColorStop(0, ‘#242f37‘); lingrad.addColorStop(1, ‘#48585c‘); ctx.fillStyle = lingrad; ctx.beginPath(); ctx.arc(0, 0, 150, 0, Math.PI * 2, true); ctx.fill();

比较关键的一点是画布的坐标轴x轴正方向是时钟3点钟方向,为了方便起见,我们把它逆时针旋转90度让它指向十二点钟方向。

绘制刻度要用到旋转rotate变形 Transformations by MDN),小时刻度有12个,相邻两个刻度与圆心连线的角度就是Math.PI/6,这里用的是弧度表示,也就是30度。那么我们就用for循环来画出小时的刻度。

 

for (var i = 0; i < 12; i++) 
  ctx.beginPath();
  ctx.strokeStyle = ‘#fff‘;
  ctx.lineWidth = 3;
  ctx.rotate(Math.PI / 6);
  ctx.moveTo(140, 0);
  ctx.lineTo(120, 0);
  ctx.stroke();

同理,分钟的刻度也一样。

ctx.beginPath();
for (i = 0; i < 60; i++) 
  if (i % 5 !== 0)  //去掉与小时刻度重叠的部分
    ctx.beginPath();
    ctx.strokeStyle = ‘#536b7a‘;
    ctx.lineWidth = 2;
    ctx.moveTo(140, 0);
    ctx.lineTo(130, 0);
    ctx.stroke();
  
  ctx.rotate(Math.PI / 30);

 

表盘大致画好了,刻度也画好了,接下来就是绘制指针并让它指向正确的时间,是不是?不就就是画一条直线么。关键是指针rotate的角度是多少呢?其实也是比较简单的。先获取当前的时间,把小时转换为12小时制的。

var now = new Date(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hr = now.getHours();
hr = hr > 12 ? hr - 12 : hr;

那么,时针的位置就是(相对于x轴正方向转过的角度):

ctx.rotate(hr * (Math.PI / 6) + min * (Math.PI / 360) + sec * (Math.PI / 21600));

同理,分针和秒针的位置:

ctx.rotate(min * (Math.PI / 30) + sec * (Math.PI/1800)); //分针
ctx.rotate(sec * (Math.PI /30)); //秒针

最后,最关键的让指针转动起来,这里要用到的是requestAnimationFrame方法,用来重绘页面,得到连贯逐帧的动画,实现最佳的动画效果。

window.requestAnimationFrame(callback);

这个callback就是我们的绘制时钟的clock()函数。需要注意的是每次执行完requestAnimationFrame后需要清除画布,不然出现重叠交错的现象,我们把它放在clock函数开始的地方。

ctx.clearRect(0, 0, canvas.width, canvas.height);

到这里,动画效果图如下:

技术图片

 

 

 

 

以上是关于Canvas绘制时钟的主要内容,如果未能解决你的问题,请参考以下文章

Canvas绘制时钟

Canvas - 时钟绘制

H5之canvas-绘制动态时钟

canvas绘制一个数字时钟

用canvas绘制一个简易时钟

canvas绘制时钟