【随笔】画一个圆

画一个圆

（1）border-radius:50%
（2）arc()实现画圆：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

画一个圆并绑定事件

画一个圆并绑定事件，点击圆内和点击圆外不同提示

<body>
  <canvas id="myCanvas" width="300" height="300px" style="border: 1px solid #000;"></canvas>
</body>

<script>
  var c = document.getElementById('myCanvas');
  var cricle = c.getContext('2d');
  cricle.beginPath();
  cricle.arc(100, 100, 50, 0*Math.PI, 2*Math.PI);
  cricle.stroke();    // stroke fill都可以

  c.addEventListener('click', function(e) {
    var x = e.pageX;
    var y = e.pageY;
    var calX = x-100;
    var calY = y-100;
    var move = Math.sqrt(calX*calX + calY*calY);
    if(move < 50) {
      console.log('圆内')
    } else {
      console.log('圆外')
    }

  })
</script>

赏

支付宝打赏

微信打赏

欣赏此文，打赏一下

画一个圆

画一个圆并绑定事件

标签

参与社区