3回答

• 

  无题毛毛

  2016-10-14 17:09:03

  已采纳

  <script type="text/javascript">

  var dom = document.getElementById('clock');

  var ctx = dom.getContext('2d');

  var width = ctx.canvas.width;

  var height = ctx.canvas.height;

  var r = width/2;

  var rem = width/200;

  
  

  function drawBackground(){

  ctx.save();

  ctx.translate(r,r);

  ctx.beginPath();

  ctx.lineWidth = 10*rem;

  ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);

  ctx.stroke();

  
  

  var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];

  ctx.font = 18*rem+'px Arial';

  ctx.textAlign = 'center';

  ctx.textBaseline = 'middle'; 

  hourNumbers.forEach(function(number,i){

  var rad = 2*Math.PI/12*i;

  var x = Math.cos(rad)*(r-30*rem);

  var y = Math.sin(rad)*(r-30*rem);

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

  var y = Math.sin(rad)*(r-18*rem);

  ctx.beginPath();

  if (i%5 === 0) {

  ctx.fillStyle = '#000';

  ctx.arc(x,y,2*rem,0,2*Math.PI,false);

  }else{

  ctx.fillStyle = '#ccc';

  ctx.arc(x,y,2*rem,0,2*Math.PI,false);

  }

  ctx.fill();

  }

  
  

  }

  
  

  function drowHour(hour,minute){

  ctx.save();

  ctx.beginPath();

  var rad = 2*Math.PI/12*hour;

  var mrad = 2*Math.PI/12/60*minute;

  ctx.rotate(rad+mrad);

  ctx.lineWidth = 6*rem;

  ctx.lineCap = 'round';

  ctx.moveTo(0,10*rem);

  ctx.lineTo(0,-r/2);

  ctx.stroke();

  ctx.restore();

  }

  
  

  function drowMinute(minute){

  ctx.save();

  ctx.beginPath();

  var rad = 2*Math.PI/60*minute;

  ctx.rotate(rad);

  ctx.lineWidth = 3*rem;

  ctx.lineCap = 'round';

  ctx.moveTo(0,10*rem);

  ctx.lineTo(0,-r+30*rem);

  ctx.stroke();

  ctx.restore();

  }

  
  

  function drowSecond(second){

  ctx.save();

  ctx.beginPath();

  ctx.fillStyle = '#c14543';

  var rad = 2*Math.PI/60*second;

  ctx.rotate(rad);

  ctx.moveTo(-2*rem,20*rem);

  ctx.lineTo(2*rem,20*rem);

  ctx.lineTo(1,-r+18*rem);

  ctx.lineTo(-1,-r+18*rem);

  ctx.fill();

  ctx.restore();

  }

  
  

  function drawDot(){

  ctx.beginPath();

  ctx.fillStyle = '#fff';

  ctx.arc(0,0,3*rem,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();

  drowHour(hour,minute);

  drowMinute(minute);

  drowSecond(second);

  drawDot();

  ctx.restore();

  }

  
  

  draw();

  setInterval(draw,1000);

  </script>

  我出来的时钟是正常的，请参考

  3 0

  无题毛毛 回复慕粉3197...

  你的是什么问题？

  2016-10-19 08:37:48

  共 3 条回复 >

• 

  风筝飞的很远

  2016-11-05 09:59:34

  canvas标签里面加上width=“200”height=“200”
  

  0 2
• 

  慕粉3197089

  2016-10-14 17:26:05

  我只能说一句你的在我这也一样，是浏览器的问题？

  0 0