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的{{1}}和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; }。< / p>

看一下这个片段：

＆＃13;
＆＃13;
<canvas id="c" width="300" height="100"></canvas>
＆＃13;
(x, y)
＆＃13;
＆＃13;
＆＃13;

由于你想创建一个按钮，而不是移动一个已经存在的按钮，我创建了一个创建一个全新按钮并将其移动到画布的某个lineTo()上的函数

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

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

1 个答案: