HTML5 시계

HTML5时钟-柯乐义 柯乐义 原文 HTML5时钟 柯乐义提示您，请使用支持HTML5的浏览器，例如Chrome,IE9,IE10,Firefox等。 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); if (ctx) { var 타이머Id; var 프레임레이트 = 60; function canvObject() { this.x = 0; this.y = 0; this.rotation = 0; this.borderWidth = 2; this.borderColor = '#000000'; this.fill = false; this.fillColor = '#ff0000'; this.update = function () { if (!this.ctx) throw new Error('柯乐义提示：您没指定ctx对象。'); var ctx = this.ctx ctx.save(); ctx.lineWidth = this.borderWidth; ctx.StrokeStyle = this.borderColor; ctx.fillStyle = this.fillColor; ctx.translate(this.x, this.y); if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180); if (this.draw) this.draw(ctx); if (this.fill) ctx.fill(); ctx.Stroke(); ctx.restore(); } }; 함수 라인() { }; Line.prototype = new canvObject(); Line.prototype.fill = false; Line.prototype.start = [0, 0]; Line.prototype.end = [5, 5]; Line.prototype.draw = function (ctx) { ctx.beginPath(); ctx.moveTo.apply(ctx, this.start); ctx.lineTo.apply(ctx, this.end); ctx.closePath(); };

function Circle() { }; Circle.prototype = new canvObject(); Circle.prototype.draw = function (ctx) { ctx.beginPath(); ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true); ctx.closePath(); };

var Circle = new Circle(); circle.ctx = ctx; circle.x = 100; circle.y = 100; circle.radius = 90; circle.fill = true; circle.borderWidth = 6; circle.fillColor = '#ffffff';

var hour = new Line(); 시간.ctx = ctx; 시간.x = 100; 시간.y = 100; hour.borderColor = "#000000"; hour.borderWidth = 10; 시간.회전 = 0; 시간.시작 = [0, 20]; hour.end = [0, -50];

var 분 = new Line(); 분.ctx = ctx; 분.x = 100; 분.y = 100; 분.borderColor = "#333333"; 분.borderWidth = 7; 분.회전 = 0; 분.시작 = [0, 20]; 분.end = [0, -70];

var second = new Line(); 초.ctx = ctx; 초.x = 100; 초.y = 100; seconds.borderColor = "#ff0000"; seconds.borderWidth = 4; 초.회전 = 0; 초.시작 = [0, 20]; 초.end = [0, -80];

var center = new Circle(); center.ctx = ctx; center.x = 100; center.y = 100; center.radius = 5; center.fill = true; center.borderColor = '주황색';

for (var i = 0, ls = [], 캐시; i cache = ls[i] = new Line(); cache.ctx = ctx; cache.x = 100; cache.y = 100; cache.borderColor = "주황색"; cache.borderWidth = 2; cache.rotation = i * 30; cache.start = [0, -70]; cache.end = [0, -80]; }

timerId = setInterval(function () { // 清除画布 ctx.clearRect(0, 0, 200, 200); // 填充背景color ctx.fillStyle = 'orange'; ctx.fillRect(0, 0, 200, 200); // 表盘 circle.update(); for (var i = 0; 캐시 = ls[i++]; ) 캐시.update(); // 时针 hour.rotation = (new Date()).getHours() * 30; hour.update(); // 分针 Minute.rotation = (new Date()).getMinutes() * 6; Minute.update(); // 秒针 second.rotation = (new Date()).getSeconds() * 6; seconds.update(); // 中心圆 center.update(); } 프레임 속도) 0); } else { alert('柯乐义提示：您的浏览器不支持HTML5无法预览.'); }

HTML5 시계

HTML5时钟

관련 기사