html绘制钟表的原理,html5 canvas绘制钟表

终于没有兼容bug了 。。。

[html]

* {

margin: 0;

padding: 0;

}

canvas {

box-shadow: 0 0 10px 10px #cccccc;

display: block;

margin: 50px auto 0;

}

window.onload = function() {

new canvasclock({

canvas: document.getelementbyid("canvas"),

r: 100,

h: [0, -30],

m: [0, -60],

s: [0, -90]

})

};

function canvasclock(opts) {

var self = this;

self.r = opts.r;

self.h = opts.h;

self.m = opts.m;

self.s = opts.s;

self.pi = math.pi;

self.canvas = opts.canvas;

self.context = self.canvas.getcontext("2d");

window.setinterval(function() {

self.canvas.width = 0;

self.canvas.height = 0;

self.canvas.width = 400;

self.canvas.height = 400;

self.context.strokestyle = "rgba(255,0,0,0.1)";

self.context.translate(self.r * 2, self.r * 2);

self.createtime("m");

self.createtime("h");

self.createtime("s")

},

1000)

};

canvasclock.prototype = {

createtime: function(str) {

var self = this;

var context = self.context;

context.linewidth = 1;

context.beginpath();

context.arc(0, 0, self.r, 0, 2 * self.pi, true);

context.stroke();

context.closepath();

var s = (new date()).getseconds();

var m = (new date()).getminutes();

var h = (new date()).gethours();

if (str == "s") {

var t = s * 6;

var x = self.s[0];

var y = self.s[1]

} else if (str == "m") {

var t = (m + s / 60) * 6;

var x = self.m[0];

var y = self.m[1]

} else {

var t = (h + m / 60) * 30;

var x = self.h[0];

var y = self.h[1]

}

context.linewidth = 10;

context.linecap = "round";

context.rotate(t * self.pi / 180);

context.beginpath();

context.moveto(0, 0);

context.lineto(x, y);

context.stroke();

context.closepath()

}

}

摘自 事与愿违