canvas座標系原點

admin發表於2018-09-10
Canvas

原點類似於數學中座標系（0,0）點座標，預設情況下，畫布左上角為原點。

但是與數學概念座標系不同的是，y軸向下為正，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/094740kycgs4t4khhge4gh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼例項如下:

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

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

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

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

相關文章