在 HTML <canvas>中动态定位按钮

Question

在画布内，我画一条线，这条线将动态创建。在行的末尾，我想创建一个 HTML 按钮。但我不知道如何创作。请帮帮我。

.HTML

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

爪哇语

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();

演示

Answer 1

不能在画布中放置或绘制 HTML 元素。您可以创建按钮，然后使用与行尾相同的left和top position: absolute 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)上。

您还应该使用 lineTo() 方法绘制一条线并调整画布width和height属性的大小。如果width和height属性是100和100，而CSS width和height样式是200px和200px的，则这些100x100像素将被拉伸以填充200x200画布，并且绘制的所有内容都将变得模糊。有关更多信息，请查看此问题。