Question

我目前正在开发一个绘图应用程序，允许用户单击并拖动以确定形状的大小，并且还可以使用绘制的形状进行转换。这是我到现在为止的截图： enter image description here

我将轴定位在画布的中心，但现在我想在中心写（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，请告诉我。任何建议将不胜感激。感谢。

Answer 1

您可以通过将默认画布坐标系的原点移动到画布的中心来将其转换为笛卡尔坐标系。

enter image description here

如果您希望绘图点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);

＆＃13;

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

＆＃13;

body{ background-color: ivory; }
canvas{border:1px solid red;}

＆＃13;

<canvas id="myCanvas" width=300 height=300></canvas>

＆＃13;

Answer 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>

在画布HTML5的中心写入（0,0）

2 个答案: