在画布中间画一个圆

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

您需要明确设置画布的大小，否则它将获得默认大小：300x150。

你应该做这样的事情

<canvas id="myCanvas" width="500" height="400"></canvas>

或通过 javascript （在获取上下文之前）

canvas.width = 500;
canvas.height = 400;
var context = canvas.getContext('2d');

Answer 2

演示小提琴

如果只想在CSS中设置画布大小，请将代码更改为：

<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>