canvas moveTo()

admin發表於2018-09-29
Canvas

moveTo由move + to兩個單詞構成，字面意思是將某一個"東西"移到指定位置。

下面通過通俗和專業術語兩個方面介紹一下這個被移動的"東西"到底是什麼。

一.通俗介紹：

實際繪畫中，繪製一個圖案總要有一個起筆的地方，所以要把畫筆移動到畫紙的適當位置。

然後從這個起筆點，開始進行隨心所欲的繪製工作。一副完整的圖畫，可能由很多小的圖案構成，所以繪製完一個小的圖案之後，畫筆的位置需要移動到新的位置，然後再繪製其他構成圖畫的小圖案。

於是，這個被移動的"東西"就是畫筆。

二.專業術語介紹：

此方法可以將子路徑的起點位置移動到指定位置。

涉及到canvas中路徑與子路徑的概念，任何時刻，canvas只有一條路徑，但路徑可以同時擁有多個子路徑。moveTo方法功能就是移動子路徑起點到指定位置。

相關閱讀：

（1）.路徑概念可以參閱canvas 路徑與子路徑一章節。

（2）.beginPath方法可以參閱canvas beginPath()一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.moveTo(x,y);

引數解析：

（1）.x：必需，子路徑的目標位置的x座標。

（2）.y:必需，子路徑的目標位置的y座標。

瀏覽器相容:

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.Opera瀏覽器支援此方法。

（6）.Safari瀏覽器支援此方法。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.strokeStyle = "blue";
  ctx.moveTo(30,20);
  ctx.lineTo(30,120);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant" width="300" height="300"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/29/144025a12chtmwbcb9zc5c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼繪製了一個簡單的豎線，分析如下：

（1）.ctx.beginPath()建立一個新的路徑，路徑中可以有多個子路徑。特別說明，在呼叫getContext方法獲取繪圖環境後，會隱式呼叫beginPath方法，所以首個beginPath方法可以省略。

（2）.ctx.moveTo(30,20)方法將子路徑的起始位置設定在座標（30,20）處。

（3）.然後再結合lineTo方法繪製一條直線。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.strokeStyle = "blue";
  ctx.moveTo(30,20);
  ctx.lineTo(30,120);

  ctx.moveTo(50,200);
  ctx.lineTo(80,220);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant" width="300" height="300"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/29/144055ffxqg4f7dz4gguzg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

前面已經提到過，一條路徑中，可以有多個子路徑。通過第一個子路徑繪製了一個豎線，然後再使用moveTo方法將新子路徑的起始移動到(50,200)，然後以此為起點建立一個斜線。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 6;
  ctx.beginPath();
  //目的繪製一條紅色的豎線
  ctx.strokeStyle = "red";
  ctx.moveTo(100, 10);
  ctx.lineTo(100, 80);
  ctx.stroke();
  //目的繪製一條紅色的豎線
  ctx.beginPath();
  //moveTo不能省略
  ctx.moveTo(100, 80);
  ctx.lineTo(200, 80);
  ctx.strokeStyle = "blue";
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/29/144122tjvgdtjq7v8o4874.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼中的第二個moveTo方法不能省略。

因為beginPath方法建立一個新的路徑，如果不在設定一個子路徑起始點，那就無從下筆繪圖了。

相關文章