動態定位HTML內的按鈕<canvas>

Question

在畫布內我繪制一條線，該線將動態創建。 在最后，我想創建一個HTML按鈕。 但我不知道如何創造。 Plz，幫幫我。

HTML

<canvas id="c"></canvas> 
<input id="btn" type="button">

使用Javascript

var line = document.createElement("canvas");
var ctx = line.getContext("2d");
document.getElementById("c").style.height = "300px";
ctx.fillStyle = "red";
ctx.fillRect(10, 1, line.width, line.height);
var ctx = c.getContext("2d");


drawLine(20, 20, 150, 70); 

function drawLine(x1, y1, x2, y2) {
    var dx = x2 - x1,
        dy = y2 - y1,
        len = (Math.sqrt(dx*dx+dy*dy)-1)|0,
        ang = Math.atan2(dy, dx);

    ctx.translate(x1|0, y1|0);
    ctx.rotate(ang);
    ctx.drawImage(line, 0, 0, len, 1);
    ctx.setTransform(1,0,0,1,0,0)
}
ctx.arc(20, 20, 5, 0, 2 * Math.PI);

ctx.fillStyle = 'green';
ctx.fill();
ctx.strokeStyle = 'red'
ctx.stroke();

DEMO

Answer 1

您不能在畫布中放置或繪制HTML元素。 您可以創建按鈕，然后使用position: absolute ，其left和top與行x和y的末尾相同。

看一下這個片段：

 var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); ctx.fillStyle = 'green'; ctx.strokeStyle = 'red'; drawLine(20, 20, 150, 70); ctx.arc(20, 20, 5, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); function drawLine(x1, y1, x2, y2) { var button = createButtonOnCanvas(x2, y2); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); ctx.closePath(); } function createButtonOnCanvas(x, y) { var btn = document.createElement("button"); document.body.appendChild(btn); btn.style.position = "absolute"; btn.style.left = x + "px"; btn.style.top = y + "px"; btn.innerHTML = "btn"; return btn; } 

 <canvas id="c" width="300" height="100"></canvas> 

由於你想要創建一個按鈕，而不是移動已經存在的按鈕，我創建了一個創建一個全新按鈕並將其移動到畫布的某個(x, y)上的(x, y) 。

您還應該使用lineTo()方法繪制一條線並調整畫布的width和height 屬性 。 如果width和height屬性為100和100而CSS width和height樣式為200px和200px ，那么這些100x100像素將被拉伸以填充200x200畫布，並且所繪制的所有內容都將變得模糊。 有關更多信息，請查看此問題。