Cal*_*Jay 1 html javascript canvas
我对 HTML5 画布上的坐标系感到困惑。我创建了一个 500x500 的画布，根据这个答案，我尝试以更容易理解的笛卡尔格式来定位它。然而，我的橙色方块出现了意想不到的行为。
对于 500,500 的画布，我希望 afillRect(-250,-250,100,100)在画布的左上角有一个左上角，但实际上却找不到它。由于某种原因， afillRect(150,150,100,100)在画布的右上角有一个右上角。
我非常困惑，有人可以阐明 HTML5 画布的动态吗？
绘制动画.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>
绘制动画.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();
};
笛卡尔坐标系不定义轴的方向。
计算机图形学采用的标准是原点位于左上角，X 轴从左到右穿过顶部，y 轴从上到下穿过屏幕。
这通常是因为在过去的几天里，显示内存的索引与 CRT 扫描线顺序与最低地址处读取的第一个字节相匹配。
尽管这对于现代计算机来说并不成立，因为所有渲染调用都首先被转换。您可以将原点设置在您想要的任何位置，并将轴的方向设置为您想要的任何方向。
如果您希望 y 轴从左下角向上移动，并且 x 轴从左下角向右移动，则将变换设置为ctx.setTransform(1,0,0,-1,0,499)
前 2 个数字是 X 轴像素的方向和比例，第二个数字是 y 轴像素的方向和比例，最后两个数字是绝对像素地址中原点的位置。
因此，如果您希望原点在右下角，x 从右到左，y 从下到上，那么ctx.setTransform(-1,0,0,-1,499,499)您仍然需要在正坐标中绘制对象。
或者对于数学系统，y 向上，x 从左到右，原点位于画布的中心ctx.setTransform(1,0,0,-1,250,250)