如何讓用戶僅在 x 軸上用背景圖像在 canvas 上畫一條線？

Question

我有一個包含圖像的 canvas，我想讓用戶在它上面畫線，僅在 x 軸上，並且不清除背景圖像。

 var lala = document.getElementById('demo'); var canvas = lala, ctx = canvas.getContext('2d'), img = new Image; img.onload = start; img.src = 'https://via.placeholder.com/300'; function start() { ctx.drawImage(img, 0, 0, demo.width, demo.height); } function drawOnX() { }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="demo" width=300 height=300></canvas> <button onclick = "drawOnX();"> start drawing </button>

Answer 1

只需使用moveTo(x, y)和lineTo(x, y)定義路徑，然后使用stroke()繪制它，您可以使用lineWidth和strokeStyle分別指定線條的粗細和樣式。

 var lala = document.getElementById('demo'); var canvas = lala, ctx = canvas.getContext('2d'), img = new Image; img.onload = start; img.src = 'https://via.placeholder.com/300'; function start() { ctx.drawImage(img, 0, 0, demo.width, demo.height); } function drawOnX() { ctx.moveTo(0, 150); ctx.lineTo(300, 150); ctx.lineWidth = 3; ctx.strokeStyle = "red"; ctx.stroke(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="demo" width=300 height=300></canvas> <button onclick = "drawOnX();"> start drawing </button>

在調用stroke之前，您可以多次調用moveTo和lineTo來繪制復雜的路徑或形狀（例如星形）。

---

或者，如果您只對水平線感興趣，您可以使用fillRect(x, y, width, height)繪制長的小矩形來模擬一條線（寬度將為 canvas 的全寬，高度為線的粗細），您可以在這種情況下使用fillStyle來設置矩形的樣式，如下所示：

 var lala = document.getElementById('demo'); var canvas = lala, ctx = canvas.getContext('2d'), img = new Image; img.onload = start; img.src = 'https://via.placeholder.com/300'; function start() { ctx.drawImage(img, 0, 0, demo.width, demo.height); } function drawOnX() { ctx.fillStyle = "red"; ctx.fillRect(0, 149, 300, 2); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="demo" width=300 height=300></canvas> <button onclick = "drawOnX();"> start drawing </button>