首先,找一张时钟的图片,就是下面这张了。
——来自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,-150,0);lingrad.addcolorStop(0,‘#242f37‘);lingrad.addcolorStop(1,‘#48585c‘);ctx.fillStyle = lingrad;ctx.beginPath();ctx.arc(0,150,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,canvas.wIDth,canvas.height);
到这里,动画效果图如下:
总结以上是内存溢出为你收集整理的Canvas绘制时钟全部内容,希望文章能够帮你解决Canvas绘制时钟所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)