                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas 绘制时钟

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

？？？？？？？

江大光明牛奶

2017-02-18

源自：Canvas 绘制时钟 4-2

关注问题我要回答

1347

操作

收起

2 回答

慕工程0708615 回答被采纳 +3 积分
2017-02-19

得看下你的代码，在draw（）函数里面的ctx.restore（）之前的函数（drawSecond（））里面的开始不需要ctx.save()，后面也不需要ctx.restore()，我的一开始就是因为设置秒针的函数的开头设置了个ctx.save(),右下角四分之一没了，因为你在设置秒针的开头设置一个ctx.save（）会导致draw里面的清除函数的画布原点，变成秒针的原点，也就是圆的中心点，今天才刚开始学canvas，也不知道我理解的对不对，反正你可以试试

0 回复有任何疑惑可以回复我~

收起回答

慕圣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();
//画小时数
    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);
    });
//画分钟数
    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);