[英]How to Add Custom Coordinate For HTML5 Canvas
Can you please take a look at This Demo and let me know how I can set the beginning of the canvas from 0,0 to 500,1200? 您能否看一下此演示,并让我知道如何将画布的起点设置为0,0到500,1200? For example if I have a Point with coordinates of 583 , 1642 then be able to add the point as:
例如,如果我有一个坐标为583,1642的点,则可以将点添加为:
ctx.arc(583, 1642, 5, 0, Math.PI * 2, true);
ctx.arc(583,1642,5,0,Math.PI * 2,true);
$("#draw").on("click", function () {
var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(0, 0, 5, 0, Math.PI * 2, true);
ctx.arc(75, 75, 5, 0, Math.PI * 2, true);
ctx.arc(300, 300, 5, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
});
Thanks, 谢谢,
You can use translate to shift the coordinate system. 您可以使用平移来移动坐标系。 Just shift it the opposite direction, for example:
只需将其反向移动即可,例如:
ctx.translate(-500, -1200);
Now when you draw something at 583, 1642 it will show up at 83, 442 relative to the view-port. 现在,当您在583、1642处绘制某个东西时,它将相对于视口显示在83、442处。
To reset just transform back or initialize with an identity matrix: 要重置,只需变换回去或使用单位矩阵初始化即可:
ctx.setTransform(1, 0, 0, 1, 0, 0);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.