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要素キャンバスを置くか、描くことができません。ボタンを作成して、leftとtopが同じ行にあるxとyの末尾にあるposition: absoluteを使用することができます。

このスニペットを見てみましょう：あなたはにしたいので、代わりに既存のものを移動するので、私は完全に作成する関数を作った、ボタンを作成

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)に移動します。

また、線を引くと属性キャンバスwidthとheightのサイズを変更するlineTo()メソッドを使用する必要があります。 CSS widthとheightスタイルが200pxと200pxありながらwidthとheight属性が100と100ている場合は、それらの100x100ピクセルが200x200キャンバスを埋めるように引き伸ばさされ、すべてが描かれてぼやけて取得します。詳細については、thisの質問をご覧ください。