问答详情
源自：4-1 Canvas动态的时分秒

用了clearRect没反应呐

为什么我的是酱紫的http://img.mukewang.com/580b187600013fb802070210.jpg

代码：


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);


还有。。怎么用火狐调试~~

提问者：慕神2706593 2016-10-22 15:45

个回答

  • shsgear
    2016-10-22 22:21:07
    已采纳

    1. 你把drawBackground和drawDot函数放在draw()函数外面没有意义，因为每次执行draw函数都会直接清除画布，还是会被清除掉.


      尝试下这样：

    2. setInterval(function(){
			ctx.clearRect(0,0,w,h);
			draw();
		},1000);

     个人感觉画布在restore和save上要多加小心，很容易出错了，我是调试时没有在draw()函数忘了写上ctx.restore()出现跟你一样的情况，加上之后发现虽然不错位了，但是没有清除的效果，所以就改成了上面的在定时器里清除画布全部代码如下:

    <!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>


    1
  • shsgear
    2016-10-23 12:41:22

    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);

    抱歉我上面代码最后部分贴错了，这是我写的正确的.

    lineWidth变大了，他是在原来的基础上宽度向两边扩大，所以减去的是lineWidth的一半http://img.mukewang.com/580c3f5c0001d4a505580267.jpg

    0