大神呀幫忙修改下為何不動
var canvas = document.getElementById("canvas")
?????? canvas.width =200
?????? canvas.height = 200
?? ??? var ctx = canvas.getContext("2d")
???? var width=ctx.canvas.width;
???? var height=ctx.canvas.height;
???? var r=width/2;
??? draw();
??? function draw(){
??? ctx.clearRect(0,0,width,height);
??? var now =new Date();
??? var hour=now.getHours();
??? var minu=now.getMinutes();
??? var second=now.getSeconds();
??? drawBackground();
??? drawHour(hour,minu);
??? drawMinute(minu);
??? drawSecond(second);
??? drawDot();
??? }
?
??? function drawDot(){ ?
????? setInterval(draw,1000);
??? }
??? function drawBackground(){
??? ctx.save();
??? ctx.translate(r,r);
??? ctx.beginPath();???????? ?
??? ctx.lineWidth=10;
??? ctx.arc(0,0,r-5,0,2*Math.PI,false);
??? ctx.stroke();
??? var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
??????? hourNumbers.forEach(function(number,i){
??????? ctx.font='18px Arial'
??????? ctx.textAlign='center';
??????? ctx.textBaseline='middle';
??????? var rad=2*Math.PI/12*i;
??????? var x=Math.cos(rad)*(r-30);
??????? var y=Math.sin(rad)*(r-30);
??????? ctx.fillText(number,x,y);
?????????????????????????? });
? ?
??????? for(var i=0;i<60;i++){
??????????? var rad=2*Math.PI/60*i;
??????????? var x=(r-20)*Math.cos(rad);
??????????? var y=(r-20)*Math.sin(rad);
??????????? ctx.beginPath();
??????????????? if(i%5==0){
????????????????????? ctx.arc(x,y,2,0,2*Math.PI,false);
?????????????????????? ctx.fillStyle='#000';
??????????????? }
??????????? else{
????????? ?
?? ??? ???? ctx.arc(x,y,2,0,2*Math.PI,false);
??????????? ctx.fillStyle='#ccc';
??????????? }
??????????? ctx.fill();
?????? }
?? }
??? function drawHour(hour,minu){
??? ctx.save();
??? ctx.beginPath();
??? var rad=2*Math.PI/12*hour;
??? var mrad=2*Math.PI/12/60*minu;
??? ctx.lineWidth=5;
??? ctx.linecap='round';
??? ctx.rotate(rad+mrad);
??? ctx.moveTo(0,10);
??? ctx.lineTo(0,-r/3);
??? ctx.stroke();
??? ctx.restore();
?? }
??? function drawMinute(minu){
??? ctx.save();
??? ctx.beginPath();
??? var rad=2*Math.PI/60*minu;
??? ctx.lineWidth=3;
??? ctx.linecap='round';
??? ctx.rotate(rad);
??? ctx.moveTo(0,10);
??? ctx.lineTo(0,-r/2);
??? ctx.stroke();
??? ctx.restore();
??? }
??? function drawSecond(second){
??? ctx.save();
??? ctx.beginPath();
??? var rad=2*Math.PI/60*second;
??? ctx.lineWidth=1;
??? ctx.linecap='round';
??? ctx.strokeStyle='#0000ff';
??? ctx.rotate(rad);
??? ctx.moveTo(0,10);
??? ctx.lineTo(0,-r/2-10);
??? ctx.stroke();
??? ctx.restore();
??? }
??? function drawDot(){
??? ctx.beginPath();
??? ctx.fillStyle='#fff';
??? ctx.arc(0,0,3,0,2*Math.PI,false);
??? ctx.fill();
??? }
2016-12-22
var canvas = document.getElementById("clock")
? ? ? ?canvas.width =200
? ? ? ?canvas.height = 200
? ? ? ?var ctx = canvas.getContext("2d")
? ? ?var width=ctx.canvas.width;
? ? ?var height=ctx.canvas.height;
? ? ?var r=width/2;
? ?
??
? ? function drawDot(){ ?
? ? ? setInterval(draw,1000);
? ? }
? ? function drawBackground(){
? ? ctx.save();
? ? ctx.translate(r,r);
? ? ctx.beginPath(); ? ? ? ? ?
? ? ctx.lineWidth=10;
? ? ctx.arc(0,0,r-5,0,2*Math.PI,false);
? ? ctx.stroke();
? ? var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
? ? ? ? hourNumbers.forEach(function(number,i){
? ? ? ? ctx.font='18px Arial'
? ? ? ? ctx.textAlign='center';
? ? ? ? ctx.textBaseline='middle';
? ? ? ? var rad=2*Math.PI/12*i;
? ? ? ? var x=Math.cos(rad)*(r-30);
? ? ? ? var y=Math.sin(rad)*(r-30);
? ? ? ? ctx.fillText(number,x,y);
? ? ? ? ? ? ? ? ? ? ? ? ? ?});
? ?
? ? ? ? for(var i=0;i<60;i++){
? ? ? ? ? ? var rad=2*Math.PI/60*i;
? ? ? ? ? ? var x=(r-20)*Math.cos(rad);
? ? ? ? ? ? var y=(r-20)*Math.sin(rad);
? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ? ? if(i%5==0){
? ? ? ? ? ? ? ? ? ? ? ctx.arc(x,y,2,0,2*Math.PI,false);
? ? ? ? ? ? ? ? ? ? ? ?ctx.fillStyle='#000';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ?
? ? ? ? ? ? ctx.arc(x,y,2,0,2*Math.PI,false);
? ? ? ? ? ? ctx.fillStyle='#ccc';
? ? ? ? ? ? }
? ? ? ? ? ? ctx.fill();
? ? ? ?}
? ?}
? ? function drawHour(hour,minu){
? ? // alert("110");
? ? ctx.save();
? ? ctx.beginPath();
? ? var rad=2*Math.PI/12*hour;
? ? var mrad=2*Math.PI/12/60*minu;
? ? ctx.lineWidth=5;
? ? ctx.linecap='round';
? ? ctx.rotate(rad+mrad);
? ? ctx.moveTo(0,10);
? ? ctx.lineTo(0,-r/3);
? ? ctx.stroke();
? ? ctx.restore();
? ?}
? ? function drawMinute(minu){
? ? ctx.save();
? ? ctx.beginPath();
? ? var rad=2*Math.PI/60*minu;
? ? ctx.lineWidth=3;
? ? ctx.linecap='round';
? ? ctx.rotate(rad);
? ? ctx.moveTo(0,10);
? ? ctx.lineTo(0,-r/2);
? ? ctx.stroke();
? ? ctx.restore();
? ? }
? ? function drawSecond(second){
? ? ctx.save();
? ? ctx.beginPath();
? ? var rad=2*Math.PI/60*second;
? ? ctx.lineWidth=1;
? ? ctx.linecap='round';
? ? ctx.strokeStyle='#0000ff';
? ? ctx.rotate(rad);
? ? ctx.moveTo(0,10);
? ? ctx.lineTo(0,-r/2-10);
? ? ctx.stroke();
? ? ctx.restore();
? ? }
? ? function drawDot(){
? ? ctx.beginPath();
? ? ctx.fillStyle='#fff';
? ? ctx.arc(0,0,3,0,2*Math.PI,false);
? ? ctx.fill();
? ? }
? ? function draw(){
? ? ctx.clearRect(0,0,width,height);
? ? var now =new Date();
? ? var hour=now.getHours();
? ? var minu=now.getMinutes();
? ? var second=now.getSeconds();
? ? drawBackground();
? ? drawHour(hour,minu);
? ? drawMinute(minu);
? ? drawSecond(second);
? ? drawDot();
? ? // ctx沒有restore
? ? ctx.restore();
? ? }
? ? // 沒有設(shè)置定時器
? ? setInterval(draw, 1000);
2016-12-26
restore（）只返回最近保存的環(huán)境，draw（）里面restore（）的是drawBackground（）里面
save（）的環(huán)境
2016-12-22
非常感謝，動起來了，但還請多指教一下，原在各其他函數(shù)聲名中己包含ctx.restore();與ctx.restore(); setInterval(draw, 1000);，為何還要在function draw()添加，還有是不是我的電腦問題，走動約10后停止，過10多秒后又刷新即時時間，如此重復(fù)，我用的是火弧