Javascript 在画布的中心写入（0,0）——HTML5_Javascript_Css_Html_Canvas

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

javascript css html canvas

Javascript 在画布的中心写入（0,0）——HTML5,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我目前正在开发一个绘图应用程序，它允许用户点击并拖动以确定形状的大小，还可以对绘制的形状进行变换。这是我目前拥有的屏幕截图：我将轴定位在画布的中心，但现在我想在中心写入（0,0）。正如你所看到的，我写的CSS只让它出现在顶部，但我希望它在中心。下面是我的transformation.html代码： <!DOCTYPE html> <head> <title>Drawing Application</title>

我目前正在开发一个绘图应用程序，它允许用户点击并拖动以确定形状的大小，还可以对绘制的形状进行变换。这是我目前拥有的屏幕截图：

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


绘图应用
(0,0) 



填充形状选项：

形状
多边形

颜色属性

填充颜色

笔划颜色

其他属性

多边形边

我该怎么做？如果您需要transformation.js，请告诉我。如有任何建议，将不胜感激。谢谢。

您只需将canvas元素设置为

位置：绝对

甚至

位置：相对

，同时将canvas设置为

z-index:1

和span设置为

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>


(0,0)

您只需将canvas元素设置为

位置：绝对

甚至

位置：相对

，同时将canvas设置为

z-index:1

和span设置为

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>


(0,0)

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

如果希望绘图点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'）；
//将画布原点（0,0）设置为中心画布
//中心画布左侧的所有坐标均为负值
//中心画布下方的所有坐标均为负值
context.translate（canvas.width/2，canvas.height/2）；
//在新原点画一个点
context.beginPath（）；
弧（0,0,5,0，Math.PI*2）；
closePath（）；
context.fill（）；
context.textAlign='center'；
填充文本（“[0,0]”，0，-10）
body{背景色：象牙；}
画布{边框：1px纯红；}
通过将默认画布坐标系的原点移动到画布的中心，可以将其转换为笛卡尔坐标系

如果希望绘图点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'）；
//将画布原点（0,0）设置为中心画布
//中心画布左侧的所有坐标均为负值
//中心画布下方的所有坐标均为负值
context.translate（canvas.width/2，canvas.height/2）；
//在新原点画一个点
context.beginPath（）；
弧（0,0,5,0，Math.PI*2）；
closePath（）；
context.fill（）；
context.textAlign='center'；
填充文本（“[0,0]”，0，-10）
body{背景色：象牙；}
画布{边框：1px纯红；}
感谢您的贡献。我有一个新问题，如果你有时间，请回答：谢谢你的贡献。我有一个新问题，如果你有时间，请回答：