在画布中心写入 (0,0)-HTML5答案

【问题标题】：Write (0,0) in center of the canvas-HTML5在画布中心写入 (0,0)-HTML5
【发布时间】：2015-04-21 00:06:35
【问题描述】：

我目前正在开发一个绘图应用程序，它允许用户单击并拖动来确定形状的大小，并且还能够对绘制的形状进行转换。这是我到目前为止的截图：

我将轴定位在画布的中心，但现在我想在中心写 (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>&nbsp; &nbsp;

    <p>Polygon&nbsp;<input type="checkbox" id="polyBox"><br/>

    </div>

    <div id="color">
    <b><p><center><u>Color Properties</u></center></b><br/>
    <p>Fill Color&nbsp;<input type="color" id="fillColor" value="#000000"/><br/>
    <p>Stroke Color&nbsp; <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&nbsp; <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，请告诉我。任何建议将不胜感激。谢谢。

【问题讨论】：

标签： javascript css html canvas

【解决方案1】：

您可以将默认画布坐标系转换为笛卡尔坐标系，方法是将其原点移动到画布中心。

如果您希望绘制点 x=0, y=0 位于画布的中心，您可以使用context.translate 将原点重置为画布中心：

然后所有绘图点从画布中心的 0,0 开始。中心画布左侧的所有坐标均为负数。中心画布下方的所有坐标均为负数。

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;}

&lt;canvas id="myCanvas" width=300 height=300&gt;&lt;/canvas&gt;

【讨论】：

感谢您的贡献。我有一个新问题，如果你有时间请回答：stackoverflow.com/questions/29751617/…

【解决方案2】：

您只需将画布元素设置为position: absolute 甚至position: relative，同时将画布设置为z-index: 1 并设置为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>

【讨论】：