Question

我对HTML5画布上的坐标系感到困惑。我创建了一个500x500画布和as per this answer我试图用更易理解的笛卡尔格式来定位它。但是，我的橙色方块出现意外行为。

使用500,500的画布，我希望fillRect(-250,-250,100,100)在画布的左上角有一个左上角，但是它无处可寻。出于某种原因，fillRect(150,150,100,100)在画布的右上角有一个右上角。

我绝望地感到困惑，有人可以了解HTML5画布的动态吗？

drawanimation.html：

    <!DOCTYPE html>
<html>
<head>
  <title>Animate Something!</title>
  <link rel='stylesheet' href='drawanimation.css'></link>
  <script src='drawanimation.js'></script>
</head>
<body onload = "draw();">
<canvas id="drawer" width="500" height="500"></canvas>
</body>
</html>

drawanimation.js

var width = 500;
var height = 500;

var draw = function(){

  var canvas = document.getElementById('drawer');
  var context = canvas.getContext('2d');
  context.save();
  context.clearRect(0,0,width,height);
  context.translate(width/2,height/2); //cartesian attempt
  //context.rotate(-Math.PI/2); //spin this thing until it's oriented right!
  context.fillStyle = 'orange';
  context.fillRect(150, 150 ,100,100);
  context.restore();
};

Answer 1

笛卡尔坐标系不定义轴的方向。

采用的计算机图形标准是左上角的原点，X轴从左到右穿过顶部，y轴从上到下沿着屏幕向下。

这通常是因为在过去几天内，显示内存的索引与CRT扫描线顺序匹配，第一个字节在最低地址读取。

虽然现代计算机无法实现这一点，因为所有渲染调用都是首次转换。您可以根据需要设置原点和轴的方向。

如果您希望y轴从左下方向上移动而x轴从左下方向右移动，则将变换设置为ctx.setTransform(1,0,0,-1,0,499)

前两个数字是X轴像素的方向和比例，第二个是y轴像素的方向和比例，后两个数字是绝对像素地址中原点的位置。

因此，如果你想要原点在右下角，x从右到左，y从下到上，然后是ctx.setTransform(-1,0,0,-1,499,499)，但你仍然需要在正坐标中绘制对象。

对于数学系统，y up和x从左到右，原点位于画布中心ctx.setTransform(1,0,0,-1,250,250)

定位于HTML5画布

1 个答案: