如何在js中找到画布的中心

时间:2018-06-18 00:49:46

标签: javascript html html5-canvas

我有canvas。我有ctx。我希望ctxcanvas中心中绘制,但是

canvas.height/2
canvas.width/2

不起作用

http://jsfiddle.net/3hnbarcg/3/

另外,我需要证明它才能接受

1 个答案:

答案 0 :(得分:1)

查看以下代码。

var centerPointWidth = 10;
var centerPointHeight = 10;
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#000000";
ctx.fillRect((canvas.width / 2) - (centerPointWidth / 2), (canvas.height / 2) - (centerPointHeight / 2), centerPointWidth, centerPointHeight);
<canvas id="c"></canvas>

完美地在画布的中心绘制一个矩形。