Fatal编程技术网

Javascript 在HTML5画布上定位

javascript html canvas

Javascript 在HTML5画布上定位,javascript,html,canvas,Javascript,Html,Canvas,我对HTML5画布上的坐标系感到困惑。我已经创建了一个500x500画布，并尝试以一种更容易理解的笛卡尔格式对其进行定向。然而，我的橙色方块却出现了意想不到的行为 对于500500的画布，我希望fillRect（-250，-250100100）在画布的左上角有一个左上角，但是它却找不到。出于某种原因，fillRect（150150100100）在画布的右上角有一个右上角 我真是莫名其妙，有人能解释一下HTML5画布的动态吗 drawanimation.html： 笛卡尔坐标系不定义轴的方向 计算

我对HTML5画布上的坐标系感到困惑。我已经创建了一个500x500画布，并尝试以一种更容易理解的笛卡尔格式对其进行定向。然而，我的橙色方块却出现了意想不到的行为

对于500500的画布，我希望
fillRect（-250，-250100100）
在画布的左上角有一个左上角，但是它却找不到。出于某种原因，
fillRect（150150100100）
在画布的右上角有一个右上角

我真是莫名其妙，有人能解释一下HTML5画布的动态吗

drawanimation.html：

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

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

这通常是因为在过去的日子里，索引到显示内存中的CRT扫描行顺序与在最低地址读取的第一个字节相匹配

尽管这在现代计算机中并不适用，因为所有渲染调用都是首先转换的。可以根据需要设置原点和轴的方向

如果希望y轴从左下角向上，x轴从左下角向上，然后将变换设置为
ctx.setTransform（1,0,0，-1,0499）

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

因此，如果您希望原点位于右下角，x从右到左，y从下到上，则
ctx.setTransform（-1,0,0，-1499499）
但您仍必须在正坐标中绘制对象

或者对于y向上，x从左向右，原点位于画布中心的数学系统
ctx.setTransform（1,0,0，-1250250）

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

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

这通常是因为在过去的日子里，索引到显示内存中的CRT扫描行顺序与在最低地址读取的第一个字节相匹配

尽管这在现代计算机中并不适用，因为所有渲染调用都是首先转换的。可以根据需要设置原点和轴的方向

如果希望y轴从左下角向上，x轴从左下角向上，然后将变换设置为
ctx.setTransform（1,0,0，-1,0499）

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

因此，如果您希望原点位于右下角，x从右到左，y从下到上，则
ctx.setTransform（-1,0,0，-1499499）
但您仍必须在正坐标中绘制对象

或者对于y向上，x从左向右，原点位于画布中心的数学系统
ctx.setTransform（1,0,0，-1250250）

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

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