大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

HTML5组件Canvas实现电子钟

基本思路:

创新互联建站是一家以网络技术公司,为中小企业提供网站维护、网站设计、成都网站制作、网站备案、服务器租用、域名注册、软件开发、成都微信小程序等企业互联网相关业务,是一家有着丰富的互联网运营推广经验的科技公司,有着多年的网站建站经验,致力于帮助中小企业在互联网让打出自已的品牌和口碑,让企业在互联网上打开一个面向全国乃至全球的业务窗口:建站电话联系:18982081108

首先绘制一个矩形背景,设置颜色为灰色。在背景上绘制一个简单的矩形外边框,然后再绘

制一个内边框,接着加载选定的图像做为电子钟内部的背景图片。然后开始绘制时钟刻度,

绘制分钟刻度,最后获取当前系统时间,绘制时分秒三个手柄。

 

技术要点:

使用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();

运行效果如下:

HTML5 组件Canvas实现电子钟


程序完全源代码如下:

     	electronic clock   

不足之处:

每次都刷新加载image对象不怎么好,我是在google浏览器中测试的,建议在

google浏览器中运行上面代码。



分享题目:HTML5组件Canvas实现电子钟
标题来源:http://dzwzjz.com/article/jgpcid.html
在线咨询
服务热线
服务热线:028-86922220
TOP