在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画布上定位

回答

相关问题