canvas 座標系原點

admin發表於2018-09-10
Canvas

數學座標系原點座標是（0,0），canvas座標系與之類似。

預設，畫布左上角為原點，與數學不同的是，預設 y 軸向下為正。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/21/203649blzk8qk9u8h3yuyn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

更多關於座標系的知識可以參閱canvas 座標系變換一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin:50px;
}
</style>
<script>
window.onload=()=>{
  let cvs = document.getElementById("canvas");
  let ctx = cvs.getContext("2d");
  ctx.fillStyle = "green";
  ctx.rect(10, 10, 100, 100);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>

預設，原點位置是畫布的左上角，位置可以調整。

如果某點被確定為原點，不管原本座標是多少，當前座標都是（0,0）。

使用translate()方法可以重新設定原點位置，具體參閱canvas translate()一章節。

相關文章