她會(huì)動(dòng)，但是要刷新秒針才會(huì)動(dòng)
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width/2;
var rem = width/200;
function drawBackground(){ ? ?//外圈設(shè)置
? ? ctx.save();
ctx.translate(r,r); ?//重新映射畫(huà)布上的（0,0）位置
ctx.beginPath(); //起始一條路徑，或當(dāng)前路徑
ctx.lineWidth=10 *rem; ? ?//200/width=10/x;
ctx.arc(0,0,r-ctx.lineWidth /2,2*Math.PI,false);
ctx.stroke(); ? //繪制已定路線
var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2]; ? //數(shù)字顯示
ctx.font = 18*rem + 'px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
hourNumbers.forEach(function(number,i){
var rad = 2*Math.PI/12*i; ?//每個(gè)小時(shí)數(shù)的弧度乘索引
var x = Math.cos(rad)*(r-30*rem);
var y = Math.sin(rad)*(r-30*rem);
ctx.fillText(number,x,y);
});
for(var i=0;i<60;i++){
var rad = 2*Math.PI/60*i;?
var x = Math.cos(rad)*(r-18*rem);
var y = Math.sin(rad)*(r-18*rem); ?//大一點(diǎn)
? ? ? ? ctx.beginPath();
if(i%5===0){
ctx.fillStyle = '#000'; ? //5個(gè)點(diǎn)的時(shí)候是黑色
? ?ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}else{
ctx.fillStyle = '#ccc';
ctx.arc(x,y,2*rem,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=6*rem;
ctx.lineCap = 'round'; ?//時(shí)針線末端的樣式
ctx.moveTo(0,10*rem); ?//時(shí)針線的長(zhǎng)度
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();
}
function drawMinute(minute){
ctx.save();
ctx.beginPath();
var rad = 2*Math.PI/60*minute;
ctx.rotate(rad);
ctx.lineWidth=3*rem;
ctx.lineCap = 'round'; ?//時(shí)針線末端的樣式
ctx.moveTo(0,10*rem); ?//時(shí)針線的長(zhǎng)度
ctx.lineTo(0,-r+30*rem);
ctx.stroke();
ctx.restore(); ?//返回之前保存過(guò)的路徑
}
function drawSecond(second){
ctx.save();
ctx.beginPath();
ctx.fillStyle = '#c14543';
var rad = 2*Math.PI/60*second;
ctx.rotate(rad);
? ? ctx.moveTo(-2*rem,20*rem); ?//時(shí)針線的長(zhǎng)度
ctx.lineTo(2*rem,20*rem);
ctx.lineTo(1,-r+18*rem);
ctx.lineTo(-1,-r+18*rem);
ctx.fill();
ctx.restore(); ?//返回之前保存過(guò)的路徑
}
function drawDot(){ ? ?//圓點(diǎn)
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0,0,3*rem,0,2*Math.PI,flase);
ctx.fill();
}
function draw(){
ctx.clearRect(0,0,width,height); ? //清除之前的紀(jì)錄
var now = new Date(); ?//獲取當(dāng)前時(shí)間
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawBackground();
drawHour(hour,minute); //例如4小時(shí)的位置
? ? drawMinute(minute);
? ? drawSecond(second);
drawDot();
ctx.restore();
}
draw();
//debugger;
//setInterval(draw,1000);
setInterval(draw,1000);
2017-01-17
你用我得代碼把，可能哪里你敲錯(cuò)了一個(gè)字母，我也沒(méi)檢查出來(lái)
window.onload=function () {
?? ?
??? var dom=document.getElementById('clock');
??? var ctx=dom.getContext('2d');
??? var height=dom.height;
??? var width=dom.width;
??? var r=width/2;
??? var rem=width/200;
??? function drawBac() {
??????? ctx.save();
?????? ctx.translate(r,r);//重定義原點(diǎn)
?????? ctx.beginPath();
?????? ctx.lineWidth=10*rem;
?????? ctx.arc(0,0,r-ctx.lineWidth/2,2*Math.PI,false);
?????? ctx.stroke();
?????? var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
??????????? ctx.font=18*rem+'px Arial';
??????????? ctx.textAlign='center';
??????????? ctx.textBaseline='middle';
?????? hourNumbers.forEach(function (number,i) {
?????????? var rad=2*Math.PI/12*i;
?????????? var x=Math.cos(rad)*(r-30*rem);
??????????? var y=Math.sin(rad)*(r-30*rem);
??????????? ctx.fillText( number,x,y);
?????????? ?
?????? });
?????? for (var i = 0; i<60; i++) {
????????? var rad=2*Math.PI/60*i;
?????????? var x=Math.cos(rad)*(r-18*rem);
??????????? var y=Math.sin(rad)*(r-18*rem);
??????????? ctx.beginPath();
??????????? if (i%5===0) {//整點(diǎn)時(shí)為黑點(diǎn)
??????????????? ctx.fillStyle='#000';
???????????????? ctx.arc(x,y,2*rem,0,2*Math.PI,false);
??????????? } else {
??????????????? ctx.fillStyle='#ccc';
???????????????? ctx.arc(x,y,2*rem,0,2*Math.PI,false);
??????????? }
????????? ?
??????????? ctx.fill();
?????? }
??? }
??? //繪制時(shí)針
??? function drawHour(hour,min) {
??????? ctx.save();
??????? ctx.beginPath();
??????? var rad=2*Math.PI/12*hour;//定義每小時(shí)旋轉(zhuǎn)的弧度
??????? var mrad=2*Math.PI/12/60*min;
??????? ctx.rotate(rad+mrad);
??????? ctx.lineWidth=6*rem;
??????? ctx.lineCap='round';
??????? ctx.moveTo(0,10*rem);
??????? ctx.lineTo(0,-r/2);
??????? ctx.stroke();
??????? ctx.restore();
??? }
??? function drawMin(min) {
??????? ctx.save();
??????? ctx.beginPath();
??????? var rad=2*Math.PI/60*min;//定義每小時(shí)旋轉(zhuǎn)的弧度
??????? ctx.rotate(rad);
??????? ctx.lineWidth=3*rem;
??????? ctx.lineCap='round';
??????? ctx.moveTo(0,10*rem);
??????? ctx.lineTo(0,-r+30*rem);
??????? ctx.stroke();
??????? ctx.restore();
??? }
??? function drawSec(sec) {
??????? ctx.save();
??????? ctx.beginPath();
???????? ctx.fillStyle='#c14543';
??????? var rad=2*Math.PI/60*sec;//定義每小時(shí)旋轉(zhuǎn)的弧度
??????? ctx.rotate(rad);
?????? ?
?????? ?
??????? ctx.moveTo(-2*rem,20*rem);
??????? ctx.lineTo(2*rem,20*rem);
??????? ctx.lineTo(1,-r+18*rem);
???????? ctx.lineTo(-1,-r+18*rem);
???????? ctx.fill();
????? ?
??????? ctx.restore();
??? }
??? function drawDot() {
??????? ctx.beginPath();
??????? ctx.fillStyle='#fff';
??????? ctx.arc(0,0,3*rem,0,2*Math.PI,false);
??????? ctx.fill();
??? }
? ?
??? function draw() {
??????? ctx.clearRect(0,0,width,height);
??????? var now=new Date();
??????? var hour=now.getHours();
??????? var min=now.getMinutes();
??????? var sec=now.getSeconds();
??????? drawBac();
??????? ?
??? drawHour(hour,min);
??? drawMin(min);
??? drawSec(sec);
?? ?
??? drawDot();
??? ctx.restore();
??? }
??? draw();
?? setInterval(draw,1000);
}