以％宽度将画布中的圆居中

Question

如果画布的宽度％如％33.3333（想法是彼此相邻有3个），则似乎无法在画布的中心绘制一个圆圈。

为什么是这样？ http://jsfiddle.net/n302nsbh/2/

的HTML

<div id="test">
    <canvas class="myCanvas"></canvas>
</div>

的CSS

.myCanvas {
    width: 33.3333333333%;
    display: inline-block;
    background-color: red;
}

JS

 var canvas = $('.myCanvas');
 canvas.width = canvas.width();
 canvas.height = canvas.height();

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

 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();

Answer 1

您的问题是canvas变量不是您的canvas对象，而是一个jQuery实例，因此，当您设置width和height属性时，它们不能正确地通过jQuery到达您的实际canvas元素。

将您的第一行更改为：

var jQCanvas = $('.myCanvas');
var canvas = jQCanvas[0];
canvas.width = jQCanvas.width();
canvas.height = jQCanvas.height();
// etc.

这是一个固定的小提琴： http : //jsfiddle.net/rgthree/n302nsbh/8/

---

就像其他人提到的那样，您可以将lineWidth从您的半径偏移，以确保它在屏幕上都包括边界在内。 我已将其添加到小提琴中，但这并不是它没有居中的真正原因。

Answer 2

问题是jQuery无法正确计算canvas元素的宽度和高度。 在您的情况下，我认为使用document.querySelector而不是$会更好。 两者都具有相似的功能，但是document.querySelector是本机的，这意味着您无需包括整个jQuery即可完成这件事。 document.querySelector返回一个DOM对象，该对象没有width和height方法，但是具有width和height属性。

更正的代码：

var canvas = document.querySelector(".myCanvas");

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

另请参见固定小提琴 。

Answer 3

canvas元素非常类似于图像，只是因为您更改了可见宽度并不意味着您更改了内部尺寸（并且您没有）

http://jsfiddle.net/n302nsbh/7/

该示例有效，因为它忽略了将其缩放到33％的情况。

 var canvas = $('.myCanvas');

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