4回答

• 

  慕粉1906006274

  2017-01-17 13:08: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.translate(r,r);  //重新映射画布上的（0,0）位置

  ctx.beginPath(); //起始一条路径，或当前路径

  ctx.lineWidth=10;  

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

  ctx.stroke();   //绘制已定路线

  var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];   //数字显示

  ctx.font = '18px 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);

  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){   //5个点的时候是黑色

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

  }else{

  ctx.fillStyle = '#ccc';

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

  }

  ctx.fill();

  }

  }

  function drawHour(hour){

  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;

  ctx.lineCap = 'round';  //时针线末端的样式

  ctx.moveTo(0,10);  //时针线的长度

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

  ctx.stroke();

  }

  function drawMinute(minute){

  ctx.save();

  ctx.beginPath();

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

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

  ctx.fillStyle = '#c14543';

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

  ctx.lineWidth=3;

      ctx.moveTo(-2,20);  //时针线的长度

  ctx.lineTo(2,20);

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

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

  ctx.fill();

  ctx.restore();  //返回之前保存过的路径

  }

  function drawDot(){    //圆点

  ctx.beginPath();

  ctx.fillStyle = '#fff';

  ctx.arc(0,0,3,0,2*Math.PI,flase);

  ctx.fill();

  }

  
  

  drawBackground();

  drawHour(4,30); //例如4小时的位置

  drawMinute(30);

  drawSecond(15);

  drawDot();

  
  

  0 0
• 

  慕粉1906006274

  2017-01-17 13:02:56

  可是我有设置js，还是不出来

  
  

  0 0
• 

  拨云见雾0

  2017-01-17 11:30:29

  相当于就是一个元素而已，没有特别的样式

  0 0
• 

  拨云见雾0

  2017-01-17 11:29:39

  对的，没设置js只会显示一个画布

  0 0