JavaScript Canvas翻譯y軸

我正在閱讀Javascript for Kids作者：Nick Morgan我製作了下面的代碼。現在JavaScript Canvas翻譯y軸

<!DOCTYPE html> 
<html> 
<head> 
    <title>Canvas Animation</title> 
</head> 
<body> 
    <canvas id ="canvas" width ="200" height="200"></canvas> 
    <script> 
     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 

     var circle = function (x, y, radius, fillCircle) { 
      ctx.beginPath(); 
       ctx.arc(x, y, radius, 0, Math.PI * 2, false); 
      if (fillCircle) { 
       ctx.fill(); 
      } 
      else { 
       ctx.stroke(); 
      } 
     } 

     var drawBee = function (x, y) { 
      ctx.lineWidth = 2; 
      ctx.strokeStyle = "Black"; 
      ctx.fillStyle = "Gold"; 

      circle(x, y, 8, true); 
      circle(x, y, 8, false); 
      circle(x - 5, y - 11, 5, false); 
      circle(x + 5, y - 11, 5, false); 
      circle(x - 2, y - 1, 2, false); 
      circle(x + 2, y - 1, 2, false); 

     } 

    </script> 
</body> 
</html>

，我創建了一個名爲circle繪製某些圈子的功能，我想創建兩個圓圈與上面值x和y的原圓心黑色輪廓。

正如你所看到的，這些圈子讓代碼

circle(x - 5, y - 11, 5, false); 
circle(x + 5, y - 11, 5, false);

但我認爲類似的地方向右移動在正方向x軸x + 5，我覺得移動了 y軸正向標度軸爲y + 11。

爲什麼它是y - 11而不是y + 11？

來源

2017-07-29 Dave Smith

因爲0,0是左上角，所以添加到y下降，從y減去上升。使用x,y符號：

 
0,0 1,0 2,0 3,0 4,0 
0,1 1,1 2,1 3,1 4,1 
0,2 1,2 2,2 3,2 4,2 
0,3 1,3 2,3 3,3 4,3 
0,4 1,4 2,4 3,4 4,4

如果你加入到y上去，然後0,0將是底部左側。

不，不是瘋了，也許它會是左下角。我認爲每一角已被用作0,0點的一些座標系。例如，默認情況下，0,0是PDF中的左下角。

來源

2017-07-29 21:11:10

哇的一瞬間就進入了我的腦海！我現在明白非常感謝！ –

事情是原點位於屏幕的左上角，而不是像預期的那樣位於左下方，所以y軸的情況就像這樣。你可以翻轉，如果你想讓它使用context.transform(1, 0, 0, -1, 0, canvas.height) 僅供參考考慮

In HTML5 Canvas, can I make the y axis go up rather than down?

Here is the discussion link you'll like to refer to

來源

2017-07-29 21:13:30

絕對太棒了。非常感謝！ –

很久以前的像素從內存掃描，從最低地址（左上）到最高（右下）。顯示器（CRT）將從左到右掃描從上到下，因爲像素是從存儲器中及時讀取的，以激發屏幕上相應的磷像素。從像素地址轉換到x，y座標和返回因此自然地與y軸向下，因爲它與內存地址方向（正向）和時間方向（時間正向）都匹配。而在那些日子裏，即使是最小的優化也非常重要。

現在，您可以通過變換矩陣進行渲染，該矩陣可以獨立設置任一軸的方向（2D x，y），也可以設置3D（x，y，z）或更多（x，y，z，w）原始像素數據仍然從最低地址到最高，除了約定和兼容性以外沒有其他原因。

來源

2017-07-29 22:28:22 Blindman67

JavaScript Canvas翻譯y軸

回答

相關問題