在画布HTML5的中心写入（0,0） [英] Write (0,0) in center of the canvas-HTML5
问题描述
我目前正在开发绘图应用程序，该应用程序允许用户单击并拖动以确定形状的大小，并且还能够使用绘制的形状进行转换。这是我到目前为止的屏幕截图：
I'm currently developing a drawing app which allows the user to click and drag to determine the size of the shape and also be able to make transformations with the shape drawn. This is the screenshot of what i have till now:
我将轴定位在画布的中心，但现在我想在中心写入（0,0）。如您所见，我编写的CSS仅使其显示在顶部，但我希望将其显示在中心。
这是我的Transformation.html代码：
I positioned the axis in the center of the canvas but now i want to write (0,0) in the center. As you can see, the CSS i wrote only makes it appear at the top but i want it at the center. Here's my codes for the 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，请告诉我。任何建议将不胜感激。谢谢。
How can i do this? If you need the transformation.js please let me know. Any suggestions will be appreciated. Thanks.
推荐答案
您只需要将canvas元素设置为 position：绝对甚至位置：相对，而画布为 z-index：1 ，跨度为 z-index：2 。
You just have to set the canvas element to position: absolute or even position: relative, while having canvas as z-index: 1 and span as z-index: 2.
尝试以下操作：-
<canvas id="myCanvas" width="1000" height="500" style="position: absolute; z-index: 1"></canvas>
<span style="position: absolute; z-index: 2; margin-left:830px; margin-top:280px; background-color:white; font-size:15px;">(0,0)</span>
这篇关于在画布HTML5的中心写入（0,0）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
