javascript - 在 Canvas 中间画一个圆圈

Question

有-

HTML -

<canvas  id="myCanvas" >
        </canvas>

        <script>

              var canvas = document.getElementById('myCanvas');
              var context = canvas.getContext('2d');
              var centerX = canvas.width / 2;
              var centerY = canvas.height / 2;
              var radius = 30;

              context.beginPath();
              context.arc(centerX,centerY, radius, 0, 2 * Math.PI);
              context.fillStyle = 'blue';
              context.fill();



        </script>

CSS-

#myCanvas {
    border:2px solid;
    display:inline-block;
    width:500px;
    height:400px;

}

http://jsfiddle.net/urielz/3E656/

但我得到的圈子不准确。我怎样才能使它准确圆圈？

Answer 1

Demo Fiddle

如果您只想在 CSS 中设置 Canvas 大小，请将代码更改为:

<canvas id="myCanvas"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var style = window.getComputedStyle(canvas);
    if (canvas.getContext) {
        canvas.width = parseInt(style.getPropertyValue('width'));
        canvas.height = parseInt(style.getPropertyValue('height'));
    }

    var context = canvas.getContext('2d');
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 30;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'blue';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = '#003300';
    context.stroke();

    this.arc(x, y, radius, 0, Math.PI * 2, false);
    this.fill();
</script>