在HTML5畫布上定位

我對HTML5畫布上的座標系感到困惑。我已經創建了一個500x500的畫布和as per this answer我試圖以更易理解的笛卡爾格式來定位它。但是，我的橙色廣場出現了意想不到的行爲。在HTML5畫布上定位

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

來源

2016-02-18 komali_2

的笛卡爾座標系統不限定軸線的方向。

計算機圖形學採用的標準是左上角的原點，X軸從左到右從頂部開始，y軸從頂部到底部向下。

這通常是因爲在過去的幾天裏，索引到顯示存儲器的時間與CRT掃描線順序匹配，並且在最低地址讀取第一個字節。

儘管現代計算機並不適用，但所有渲染調用都是首先轉換的。您可以根據需要設置原點，並設置軸想要的方向。

如果你想y軸從下到向左走起來，x軸從底部走左跨右然後將轉換爲ctx.setTransform(1,0,0,-1,0,499)

第2號是一個像素的方向和規模第二個是y軸像素的方向和比例尺，最後兩個數字是絕對像素地址中原點的位置。

所以，如果你想要在右下角的原點，x從右到左，y從下到上然後ctx.setTransform(-1,0,0,-1,499,499)，但你仍然必須在正座標中繪製對象。

或者對於y向上和x從左到右的數學系統，其原點位於畫布中心ctx.setTransform(1,0,0,-1,250,250)

來源

2016-02-18 00:45:15 Blindman67

在HTML5畫布上定位

回答

相關問題