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

Question

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

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

您无法在 Canvas 中放置或绘制 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) Canvas 。

您还应该使用lineTo()绘制线条并调整 Canvas 大小的方法'width和height 属性。如果width和height属性为100和100而 CSS width和height样式为200px和200px ，那些100x100像素将被拉伸(stretch)以填充 200x200 Canvas 和绘制的所有内容都会变得模糊。欲了解更多信息，请查看this问题。