canvas lineTo()

admin發表於2018-10-16
Canvas

此方法可以將子路徑中兩個點用直線連線起來（不會真正繪製直線）。

然後可以利用stroke方法對路徑進行描邊，將直線繪製出來。

關於路徑概念可以參閱canvas路徑與子路徑詳解一章節。

語法結構：

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

引數解析：

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

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

瀏覽器相容:

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

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

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

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

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

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

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<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="red";
  ctx.lineWidth=5;
  ctx.moveTo(10,10);
  ctx.lineTo(100,50);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/16/234937g5smy061mocdo20o.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.strokeStyle設定描邊顏色為紅色。

（2）.lineWidth設定直線的寬度為5px。

（3）.moveTo方法將筆觸移動到指定座標，實質是建立一個子路徑起點位置。

（4）.lineTo方法可以在目標點與當前子路徑的最後一個點之間連線起來。

（5）.stroke對路徑進描邊，繪製出直線。

相關文章