HTML画二维圆（web）

简介： HTML画二维圆（web）

代码：

<template>
  <div id="app-container">
    <div style="text-align: center">
      <h2>方案展示</h2>
      <div style=" display: flex;justify-content: center;align-items: center;">
<!--        width和height分别是css的宽高的两倍，是为了防止画出来的图像模糊-->
        <canvas id="plan" width="2400" height="1200">
        </canvas>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "TubeCaculatePlan",

    data() {
      return {}
    },

    methods: {
      paint(radius, x, y, color) {
        let canvasPlan = document.getElementById("plan")
        let draw = canvasPlan.getContext("2d")

        draw.beginPath()
        // 根据角度来设置画圆的范围，可以不画整圆  anticlock：是否采用逆时针
        draw.arc(x, y, radius, 0, Math.PI * 2, false)
        draw.closePath()
        //给圆设置背景颜色，不设置默认是黑色
        draw.fillStyle = color
        //给圆图色
        draw.fill()
        //设置边的颜色
        draw.strokeStyle = 'rgba(0, 0, 0, 1)'
        //设置圆的边
        draw.stroke()
      }
    },
    mounted() {
      this.paint(500, 600, 600,'rgba(255, 0, 0, 1)')
    },
  }

  window.onload = function () {
  }

</script>
<style scoped>
  #plan {
    width: 1200px;
    height: 600px;
    border: 2px solid #102b6a;
  }
</style>

效果：