前端开发

今天特意学了下三角函数来画一个时钟效果，

公式是：

    //计算坐标点
    x1   =   r   +  r/2  *  Math.cos(angle  *  Math.PI / 180 ) ;
    y1   =   r   +  r/2  *  Math.sin(angle   *   Math.PI /180  ) ;

代码：

    
    
    
    
    
    
    
    
    
    
    

    
    




    

  

  var canvas = document.getElementById("can");
  var canvasW = canvas.width;
  var canvasH = canvas.height;
  console.log(canvas,canvasW,canvasH);

  var draw = canvas.getContext("2d");
  draw.fillStyle="#f1f1f1";

  var angle = 0;
  var r = 100;
  var x= 0;
  var y = 0;

  setInterval(function(){
    getTriangle();
  },30);

function getTriangle(){
     draw.clearRect(0,0,canvasW,canvasH);
    //画圆
    draw.beginPath();
    draw.arc(r,r,r/2,0, 2 *Math.PI);
    draw.fill();
    draw.stroke();
    draw.closePath();

    //画圆心
    draw.beginPath();
    // draw.moveTo(r,r);
    draw.arc(r,r,10,0, 2 *Math.PI);
    //draw.fillStyle="#ff0000";
    draw.fill();
    draw.stroke();
    draw.closePath();

    //计算坐标点
    x1   =   r   +  r/2  *  Math.cos(angle  *  Math.PI / 180 ) ;
    y1   =   r   +  r/2  *  Math.sin(angle   *   Math.PI /180  ) ;
    draw.beginPath();
   draw.moveTo(r,r);
    draw.lineTo(x1,y1);
    draw.stroke();
     draw.closePath();

    // console.log(x1,y1);
    angle = angle+ 5;
}