html：
<canvas id="#clock" width="63px" height="63px"></canvas>
js：
var dom = $("#clock");
var ctx = dom[0].getContext("2d");
console.log(ctx.canvas.width);
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width/2;
var rem = width/200;
function drawAround() {
ctx.save();
ctx.beginPath();
ctx.translate(r,r);
ctx.lineWidth = 2;
ctx.arc(0,0,r-1,0,2*Math.PI,false);
ctx.strokeStyle = "#FFF";
ctx.stroke();
for (var i = 0; i < 60; i++) {
var rad = 2 * Math.PI/60 * i;
var x = Math.cos(rad) * (r-6);
var y = Math.sin(rad) * (r-6);
ctx.beginPath();
if (i % 5 != 0) {
ctx.fillStyle = "rgba(255,255,255,0)";
}
else if (i % 3 != 0) {
ctx.fillStyle = "#FFF";
}
else{
ctx.fillStyle = "#F00";
}
ctx.arc(x,y,2,0,2*Math.PI,false);
ctx.fill();
}
}
function drawHour(hour,minute) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI/12 * hour;
var mrad = 2 * Math.PI/12/60 * minute;
ctx.rotate(rad + mrad);
ctx.lineWidth = 4;
ctx.lineCap = "round";
ctx.fillStyle = "#FFF";
ctx.moveTo(0,3);
ctx.lineTo(0,-14);
ctx.stroke();
ctx.restore();
}
function drawMinute(minute) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI/60 * minute;
ctx.rotate(rad);
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.moveTo(0,5);
ctx.lineTo(0,-r+14);
ctx.stroke();
ctx.restore();
}
function drawSecond(second) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI/60 * second;
ctx.rotate(rad);
ctx.fillStyle = "#F00";
ctx.moveTo(-2,10);
ctx.lineTo(2,10);
ctx.lineTo(0,-r+10);
ctx.lineTo(-1,-r+10);
ctx.fill();
ctx.restore();
}
function drawDot() {
ctx.beginPath();
ctx.fillStyle = "#FFF";
ctx.arc(0,0,3,0,2*Math.PI,false);
}
function draw() {
ctx.clearRect(0,0,width,height);
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawAround();
drawSecond(second);
drawMinute(minute);
drawHour(hour,minute);
drawDot();
ctx.restore();
}
draw();
setInterval(draw,1000);
