在網頁開發中，JavaScript 可以幫助我們實現很多有趣的功能，比如畫出各種線條。本文將介紹如何在網頁中使用 Javascript 畫出坐標線，并且獲取線條上的點的坐標。通過這個例子，你將學習到如何使用 HTML5 中的 Canvas 畫布。

Step 1: 準備工作

我們首先需要在 HTML 中添加一個 Canvas 畫布，代碼如下：

<canvas id="myCanvas" width="500" height="500"></canvas>

注意，該 canvas 元素沒有內容，你看不到任何東西。它只是一個占位符，我們將在 JavaScript 中畫出線條。

Step 2: 開始繪圖

接著我們需要在 JavaScript 中獲取該元素，并獲取繪圖上下文 getContext()：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

有了繪圖上下文，我們就可以在畫布上繪制一個簡單的坐標軸：

ctx.beginPath();
// x 軸線
ctx.moveTo(0,250);
ctx.lineTo(500,250);
// y 軸線
ctx.moveTo(250,0);
ctx.lineTo(250,500);
ctx.stroke();

Step 3: 繪制路徑

我們可以使用 beginPath() 和 closePath() 方法在畫布上繪制路徑。以下是一個例子，在畫布上繪制一個由3個點組成的三角形：

ctx.beginPath();
ctx.moveTo(100,100); // 第一個點
ctx.lineTo(150,200); // 第二個點
ctx.lineTo(50,200);  // 第三個點
ctx.closePath();     // 連接第三個點和第一個點
ctx.stroke();

你可以嘗試在畫布上畫出你想象中的線條，一步步理解此處的代碼實現。

Step 4: 獲取坐標信息

我們可以通過以下代碼監聽鼠標點擊事件，并獲取鼠標點擊處的坐標：

canvas.addEventListener('click', function(event) {
let x = event.clientX - canvas.offsetLeft;
let y = event.clientY - canvas.offsetTop;
console.log(`x: ${x}, y: ${y}`);
});

我們可以在 canvas 上點擊，控制臺會輸出該處的坐標信息。

以上是一個完整的坐標畫線并獲取坐標的 JavaScript 例子。這里僅展示了最基本的功能，你可以自由地擴展它，實現你想象中的功能。祝你好運！