HTML5 canvas 实现小时钟

正在看HTML5的相关内容，这个是关于canvas应用的小程序

canvas画图很强大，就类似于自己用圆规直尺在画板上画图一样

写的时候参照了网上其他代码，比如擦除表针要上下左右多擦除两个像素

写完之后才发现自己定义的needle类里面的rect()没写好，代码重用率低了，如果还有什么其他问题，欢迎指出

不罗嗦，放代码

index.html:

<!DOCTYPE HTML>
<html><head><title>My canvas</title></head><body><canvas id = "drawing" width = "400" height = "400">Your browser doesn't support canvas!</canvas><p id = "Date"></p><script type="text/javascript" src="js/Canvas.js"></script></body>
</html>

Canvas.js:

var c = document.getElementById("drawing");
var date = document.getElementById("Date");
var clock={pan : {panRect : function(cxt){cxt.beginPath();cxt.arc(0,0,100,0,2*Math.PI,true);cxt.stroke();cxt.closePath();},numRect : function(cxt){cxt.beginPath();for (var i = 0; i <60; i++){if(i % 5 == 0){if(i % 15 ==0){cxt.fillRect(80,-4,20,8);}                  elsecxt.fillRect(84,-3,16,6);}else{cxt.fillRect(90, -1, 10, 2);}cxt.rotate(2 * Math.PI/60);}cxt.closePath();},init:function(cxt){this.panRect(cxt);this.numRect(cxt);}},needle:{s : {angle : 0,len : 80,color : '#00ff00',rect : function(cxt,time){cxt.restore();        cxt.save();cxt.rotate(this.angle);cxt.clearRect(-13, -2, this.len + 2, 4);//要擦多两个像素cxt.restore();cxt.save();this.angle = (time.getSeconds()+time.getMilliseconds()/1000)* Math.PI / 30;//2 * Math.PI / 60cxt.rotate(this.angle);cxt.fillStyle=this.color;cxt.fillRect(-12,-1, this.len , 2);}            },m : {angle : 0,len : 70,color : '#ff0000',rect : function(cxt,time){cxt.restore(); cxt.save();cxt.rotate(this.angle);cxt.clearRect(-13, -3, this.len + 2, 6);cxt.restore();cxt.save();this.angle = (time.getSeconds()/60 + time.getMinutes()) * Math.PI / 30;cxt.rotate(this.angle);cxt.fillStyle=this.color;cxt.fillRect(-12,-2, this.len , 4);}},h : {angle : 0,len : 60,color : '#0000ff',rect : function(cxt,time){cxt.restore(); cxt.save();cxt.rotate(this.angle);cxt.clearRect(-13, -4, this.len + 2, 8);cxt.restore();cxt.save();this.angle = (time.getMinutes()/60 + time.getHours()*5) * Math.PI / 30;cxt.rotate(this.angle);cxt.fillStyle=this.color;cxt.fillRect(-12,-3, this.len , 6);}},tickTack : function(cxt){var time = new Date();this.h.rect(cxt,time);this.m.rect(cxt,time);           this.s.rect(cxt,time);date.innerHTML=time;}},init : function(cxt){cxt.translate(200,200);cxt.rotate(-Math.PI / 2);cxt.save();with(clock){pan.init(cxt);                    var MyInterval = setInterval("clock.needle.tickTack(cxt)", 10); }        }
};
if(c.getContext){var cxt = c.getContext("2d");cxt.strokeRect(0,0,c.width,c.height);  clock.init(cxt);
}

最终效果：

HTML5 canvas 实现小时钟相关推荐

html5网站粒子时钟,Html5 canvas实现粒子时钟的示例代码
这篇文章主要介绍了Html5 canvas实现粒子时钟的示例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实 ...
数字时钟html5 js,html5 canvas js(数字时钟)实例代码
canvas dClock 您的浏览器太古董了,升级吧! var clock = document.getElementById("clock"); var cxt = clock ...
html画布时钟添加背景图,用HTML5 Canvas 实现的时钟
基本动画的步骤 Basic animation steps 用canvas画一帧动画,通常需要以下四个步骤: 1. 清空 canvas 除非接下来要画的内容会完全充满 canvas (例如背景图), ...
html数字时钟免费代码,html5 canvas js(数字时钟)实例代码
canvas dClock 您的浏览器太古董了,升级吧! var clock = document.getElementById("clock"); var cxt = clock ...
html页面涂鸦,HTML5 | Canvas画笔小应用（涂鸦板）
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 const canvas = document.querySelector('#draw'); const ...
html5圆形图片自动旋转,HTML5/Canvas 彩虹小方块圆盘旋转
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas, ctx, width, height, xCenter, yCenter, squa ...
html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作数字时钟样式.html5 canvas数字时钟代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
html5的canvas动画效果,HTML5 Canvas：制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
9个非常有趣的HTML5 Canvas动画特效合集
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

HTML5 canvas 实现小时钟

HTML5 canvas 实现小时钟相关推荐

最新文章

热门文章