                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas 繪制時鐘

為什么清楚第一次左下角4分之1沒了，第二次全沒了

？？？？？？？

江大光明牛奶

2017-02-18

源自：Canvas 繪制時鐘 4-2

關(guān)注問題我要回答

1402

操作

收起

2 回答

慕工程0708615 回答被采納 +3 積分
2017-02-19

得看下你的代碼，在draw（）函數(shù)里面的ctx.restore（）之前的函數(shù)（drawSecond（））里面的開始不需要ctx.save()，后面也不需要ctx.restore()，我的一開始就是因為設(shè)置秒針的函數(shù)的開頭設(shè)置了個ctx.save(),右下角四分之一沒了，因為你在設(shè)置秒針的開頭設(shè)置一個ctx.save（）會導(dǎo)致draw里面的清除函數(shù)的畫布原點，變成秒針的原點，也就是圓的中心點，今天才剛開始學(xué)canvas，也不知道我理解的對不對，反正你可以試試

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

慕圣1391341
2017-03-19

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();
//畫小時數(shù)
????var??hoursNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
????ctx.font="18px?Arial";
????ctx.textAlign="center";
????ctx.textBaseline="middle";
????hoursNumbers.forEach(function?(number,i){
????????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);
????});
//畫分鐘數(shù)
????for?(var?i?=?0;?i?<?60;?i++)?{
????????var?rad?=2*Math.PI/60*i;
????????var?x?=?Math.cos(rad)*(r-18);
????????var?y?=Math.sin(rad)*(r-18);
????????ctx.beginPath();
????????if(i%5===0){
????????????ctx.fillStyle="#000";
????????????ctx.arc(x,y,2,0,2*Math.PI,false);
????????}else{
????????????ctx.fillStyle="#ccc";
????????????ctx.arc(x,y,2,0,2*Math.PI,false);
????????}??
????????ctx.fill();
????}
}
//時針
function?drawHour(hour,minute,second){
????ctx.save();
????ctx.beginPath();
????var?rad=2*Math.PI/12*hour;
????var?mrad=2*Math.PI/12/60*minute;
????var?srad=2*Math.PI/12/60/60*second;
????ctx.rotate(rad+mrad+srad);
????ctx.lineWidth=6;
????ctx.lineCap="round";
????ctx.moveTo(0,10);
????ctx.lineTo(0,-r/2);
????ctx.stroke();
????ctx.restore();
}
function?drawMinute(minute,second){
????ctx.save();
????ctx.beginPath();
????var?rad=2*Math.PI/60*minute;
????var?srad=2*Math.PI/60/60*second;
????ctx.rotate(rad+srad);
????ctx.lineWidth=3;
????ctx.lineCap="round";
????ctx.moveTo(0,10);
????ctx.lineTo(0,-r+30);
????ctx.stroke();
????ctx.restore();
}
//秒針
function?drawSecond(second){
????ctx.save();
????ctx.beginPath();
????var?rad=2*Math.PI/60*second;
????ctx.rotate(rad);
????ctx.lineWidth=1;
????ctx.moveTo(0,10);
????ctx.lineTo(0,-r+18);
????ctx.strokeStyle="red";
????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?minute=now.getMinutes();
????var?second=now.getSeconds();
???drawBackground();?
???drawHour(hour,minute,second);
???drawMinute(minute,second);
???drawSecond(second);?
???drawDot();?
???ctx.restore();
}
draw();

setInterval(draw,1000);