我目前正在开发一个绘图应用程序，它允许用户通过单击和拖动来确定形状的大小，还可以对绘制的形状进行转换。这是我到目前为止的截图:
我将轴定位在 Canvas 的中心，但现在我想在中心写入 (0,0)。如您所见，我编写的 CSS 仅使其出现在顶部，但我希望它位于中心。 这是我的 transformation.html 代码:
<!DOCTYPE html>
<head>
<title>Drawing Application</title>
<link href="transform.css" rel="stylesheet">
</head>
<body>
<canvas id="myCanvas" width="1000" height="500"></canvas>
<span style="margin-left:820px; margin-top:500px;">(0,0)</span> <!--tried with some CSS-->
<br><output id="out"></output>
<script src="transform.js"></script>
<div id="shapeProperties">
<p>
<label>
<div id="shape">
<p><b>Fill shapes option:</b> <input type="checkbox" id="fillType"></b><br/>
<p><b><center><u>Shapes</u></center></b>
<p>Polygon <input type="checkbox" id="polyBox"><br/>
</div>
<div id="color">
<b><p><center><u>Color Properties</u></center></b><br/>
<p>Fill Color <input type="color" id="fillColor" value="#000000"/><br/>
<p>Stroke Color <input type="color" id="strokeColor" value="#000000"/><br/>
</div>
<div id="range">
<b><p><center><u>Other Properties</u></center></b><br/>
<label>Polygon Sides <input type="range" id="polygonSide" step="1" min="3" max="9" value="3"></label>
</div>
<div id="clear">
<p> <center><input id="clearCanvas" type="button" value="CLEAR"></center></p>
</div>
</label>
</p>
</div>
</body>
</html>
我该怎么做？如果您需要 transformation.js，请告诉我。任何建议将不胜感激。谢谢。
最佳答案
您可以将默认的 Canvas 坐标系转换为笛卡尔坐标系，方法是将其原点移动到 Canvas 的中心。
如果你希望绘图点 x=0, y=0 位于 Canvas 的中心，你可以使用 context.translate 将原点重置为中心 Canvas :
然后所有绘图点都从 Canvas 中心的 0,0 开始。中心 Canvas 左侧的所有坐标均为负数。中心 Canvas 下方的所有坐标均为负值。
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
// set the canvas origin (0,0) to center canvas
// All coordinates to the left of center canvas are negative
// All coordinates below center canvas are negative
context.translate(canvas.width/2,canvas.height/2);
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
// set the canvas origin (0,0) to center canvas
// All coordinates to the left of center canvas are negative
// All coordinates below center canvas are negative
context.translate(canvas.width/2,canvas.height/2);
// draw a dot at the new origin
context.beginPath();
context.arc(0,0,5,0,Math.PI*2);
context.closePath();
context.fill();
context.textAlign='center';
context.fillText('[ 0, 0 ]',0,-10);body{ background-color: ivory; }
canvas{border:1px solid red;}<canvas id="myCanvas" width=300 height=300></canvas>关于javascript - 在 Canvas 中心写(0,0)-HTML5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29742350/