用了clearRect沒(méi)反應(yī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;
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();
}
drawBackground();
drawDot();
function draw(){
?? ?ctx.clearRect(0,0,width,height);
?? ?var now =new Date();
?? ?var hour=now.getHours();
?? ?var minu=now.getMinutes();
?? ?var second=now.getSeconds();
?? ?
drawHour(hour,minu);
drawMinute(minu);
drawSecond(second);
drawBackground();
??? drawDot();
??? ctx.restore();
}
draw();
setInterval(draw,1000);
還有。。怎么用火狐調(diào)試~~
2016-10-22
你把drawBackground和drawDot函數(shù)放在draw()函數(shù)外面沒(méi)有意義，因?yàn)槊看螆?zhí)行draw函數(shù)都會(huì)直接清除畫(huà)布，還是會(huì)被清除掉.
嘗試下這樣：
setInterval(function(){ ctx.clearRect(0,0,w,h); draw(); },1000);?個(gè)人感覺(jué)畫(huà)布在restore和save上要多加小心，很容易出錯(cuò)了，我是調(diào)試時(shí)沒(méi)有在draw()函數(shù)忘了寫(xiě)上ctx.restore()出現(xiàn)跟你一樣的情況，加上之后發(fā)現(xiàn)雖然不錯(cuò)位了，但是沒(méi)有清除的效果，所以就改成了上面的在定時(shí)器里清除畫(huà)布全部代碼如下:
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8"?/> <title></title> <style?type="text/css"> div{ ?????????text-align:?center; ?????margin-top:?250px; } #click{ border:?1px?solid?#CCC; } </style> </head> <body> <div> <canvas?id="click"?width="200px"?height="200px"></canvas> </div> <script> var?canvas=document.getElementById('click'); var?ctx=canvas.getContext('2d'); var?w=ctx.canvas.width; var?h=ctx.canvas.height; var?r=w/2; function?drawCircle(){ 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?hoursNum=[3,4,5,6,7,8,9,10,11,12,1,2]; ????hoursNum.forEach(function(number,i){ ???? ctx.font='18px?微軟雅黑'; ???? ctx.textAlign='center'; ???? ctx.textBaseline='middle'; ???? var?rad=2*Math.PI/12*i; ???? var?y=(r-30)*Math.sin(rad); ???? var?x=(r-30)*Math.cos(rad); ???? ctx.fillText(number,x,y); ????}) ???} ??? ????function?drawDots(){ ????????for(j=0;j<60;j++){ ????????????????ctx.beginPath();???? ???????? ????????var?rad=2*Math.PI/60*j; ????????var?y=(r-15)*Math.sin(rad); ???? var?x=(r-15)*Math.cos(rad); ???? ctx.beginPath(); ???? if(j%5===0){ ????????ctx.fillStyle='#000' ???? ctx.arc(x,y,3,0,2*Math.PI,false); ???? }else{ ????????ctx.fillStyle='#CCC'; ???? ctx.arc(x,y,2,0,2*Math.PI,false); ???? } ????????ctx.fill(); ????} ???????ctx.beginPath(); ???????ctx.fillStyle='white'; ???????ctx.arc(0,0,2.5,0,2*Math.PI,false); ???????ctx.fill(); ????} ???? ???function?drawHour(h,min){ ??? ???ctx.save(); ??? ???ctx.beginPath(); ??? ???ctx.lineWidth=6; ??? ???ctx.lineCap='round'; ??? ???var?rad=2*Math.PI/12*h; ??? ???var?minRad=2*Math.PI/720*min; ??? ???ctx.rotate(rad+minRad); ??? ???ctx.moveTo(0,10); ??? ???ctx.lineTo(0,-(r-50)); ??? ???ctx.stroke(); ??? ???ctx.restore(); ??? } ???function?drawMinute(min,sec){ ??? ???ctx.save(); ??? ???ctx.beginPath(); ??? ???ctx.lineWidth=4.5; ??? ???ctx.lineCap='round'; ??? ???var?rad=2*Math.PI/60*min; ??? ???var?secRad=2*Math.PI/3600*sec; ??? ???ctx.rotate(rad+secRad); ??? ???ctx.moveTo(0,10); ??? ???ctx.lineTo(0,-(r-40)); ??? ???ctx.stroke(); ??? ???ctx.restore(); ??? } ???function?drawSecond(sec){ ??? ???ctx.save(); ??? ???ctx.beginPath(); ??? ???ctx.fillStyle='crimson'; ??? ???ctx.rotate(2*Math.PI/60*sec); ??? ???ctx.moveTo(-2,20); ??? ???ctx.lineTo(2,20); ??? ???ctx.lineTo(1,-r+18); ??? ???ctx.lineTo(-1,-r+18); ??? ???ctx.fill(); ??? ???ctx.restore(); ??? } function?draw(){ ctx.clearRect(0,0,w,h) drawCircle(); var?now=new?Date(); var?h=now.getHours(); var?min=now.getMinutes(); var?sec=now.getSeconds(); drawHour(h,min); drawMinute(min,sec); drawSecond(sec); drawDots(); } draw(); setInterval(draw,1000); </script> </body> </html>2016-10-23
function?draw(){ var?now=new?Date(); var?h=now.getHours(); var?min=now.getMinutes(); var?sec=now.getSeconds(); drawCircle(); drawHour(h,min); drawMinute(min,sec); drawSecond(sec); drawDots(); ctx.restore(); } draw(); setInterval(function(){ ctx.clearRect(0,0,w,h); draw(); },1000);抱歉我上面代碼最后部分貼錯(cuò)了，這是我寫(xiě)的正確的.
lineWidth變大了，他是在原來(lái)的基礎(chǔ)上寬度向兩邊擴(kuò)大，所以減去的是lineWidth的一半