以％寬度將畫布中的圓居中

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;