在画布HTML5的中心写入(0,0)
Man*_*noo 1 javascript css html5 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,请告诉我.任何建议将不胜感激.谢谢.
您可以通过将其原点移动到画布的中心,将默认画布坐标系转换为笛卡尔坐标系.
如果要绘制点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;}<canvas id="myCanvas" width=300 height=300></canvas>