Question

如果画布的宽度为％，例如％33.3333（想法是彼此相邻），我似乎不能在画布的中心画圆圈。

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到你的实际画布元素。

将您的第一行更改为：

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;

另见fixed fiddle。

Answer 3

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

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;

将画布居中放置在宽度为％的画布中

3 个答案: