HTML5组件Canvas实现电子钟-创新互联
基本思路:
专注于为中小企业提供网站设计、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业解放免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。首先绘制一个矩形背景,设置颜色为灰色。在背景上绘制一个简单的矩形外边框,然后再绘
制一个内边框,接着加载选定的图像做为电子钟内部的背景图片。然后开始绘制时钟刻度,
绘制分钟刻度,最后获取当前系统时间,绘制时分秒三个手柄。
技术要点:
使用HTML5的Canvas 2D绘制对象,主要使用context.save()与context.restore()方法来保存
绘制状态和重置绘制状态,使用Transform和fillRect()方法来绘制时钟和分钟刻度。使用
drawImage()方法来绘制背景图片,使用setTimeout()方法来刷新时间显示。
代码详解:
获取HTML5 Canvas绘制对象的代码如下:
var canvas = document.getElementById("canvas1"); ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 500, 500);绘制时钟刻度的代码如下:
var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(245, 245); for (var i=0; i <= 12; i++) { // top ctx.fillRect(160,-7.5,30,10); ctx.strokeRect(160,-7.5,30,10); ctx.transform(cos, sin, -sin, cos, 0, 0); }绘制分钟分钟刻度的代码如下:
var sin = Math.sin(Math.PI/30); var cos = Math.cos(Math.PI/30); for (var i=0; i <= 60; i++) { ctx.fillRect(170,-5,10,2); ctx.transform(cos, sin, -sin, cos, 0, 0); }
保存制状态代码如下:
ctx.translate(245, 245); ctx.save();恢复绘制状态代码如下:
ctx.restore();
运行效果如下:
程序完全源代码如下:不足之处:
每次都刷新加载image对象不怎么好,我是在google浏览器中测试的,建议在
google浏览器中运行上面代码。
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站题目:HTML5组件Canvas实现电子钟-创新互联
文章出自:http://myzitong.com/article/dippce.html