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

用了clearRect没反应呐

为什么我的是酱紫的

代码：

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

慕神2706593

2016-10-22

源自：Canvas 绘制时钟 4-1

关注问题我要回答

3076

操作

收起

2 回答

shsgear 回答被采纳 +3 积分
2016-10-22

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

尝试下这样：

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 回复有任何疑惑可以回复我~

收起回答

追觅梦初的国度回复慕神2706593 提问者

lineWidth在路径的两边各一半的.

2016-11-11 回复有任何疑惑可以回复我~

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

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

lineWidth变大了，他是在原来的基础上宽度向两边扩大，所以减去的是lineWidth的一半