同じオブジェクトの複数の画像を1つのキャンバスに描画する方法

Question

同じ画像でキャンバスに複数回描画したい、つまりキャンバス領域をクリックすると画像を生成するコードを適用したいもう一度別の場所をクリックすると、別の画像が生成されます。

<canvas></canvas> 

しかし、もう一度描画しようとすると、以前に描画されたイメージが置き換えられ、新しいイメージが描画されます。直前の描画イメージをキャンバス上に保持するのではなく、

function drawAll(){ 
    context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height,0, 0, 700, 618); 

    if(coordinates.length > 0){ 
    coordinates.map((coord, key) =>{ 
    context.beginPath(); 

    context.moveTo(coord.startX, coord.startY); 

    context.lineTo(coord.toX,coord.toY); 

    context.strokeStyle="rgb(226, 104, 36)"; 
    context.lineWidth=2; 
    context.stroke();     
     }); 
    } 

    if(entry){ 
     context.drawImage(imageObjBall, entry.posX-8, entry.posY-8, 16, 16); 
    } 
} 

EDIT：ちょっとごめんダウンここで、このビットを挿入するのを忘れ

function handleClick(e){ 
    if(!isDrawing && prize_id != null){ 
    var pos = getMousePos(canvas, e); 
    mouseX = pos.x; 
    mouseY = pos.y; 

    $x_id=`#cor_x_${prize_id}`; 
    $y_id=`#cor_y_${prize_id}`; 

    context.clearRect(0, 0, 700, 618); 

    context.drawImage(imageObjBall, mouseX-8, mouseY-8, 16, 16); 

    entry={posX:mouseX,posY:mouseY}; 

    $($x_id).text(mouseX); 
    $($y_id).text(mouseY);   
    drawAll(); 
    } 
} 

注：これはlaravel 5であり、より多くの本の外側のコードが、私 フェルトがありますこれは、あなたが助けることができるために必要なスナップされました 私にあなたがもっとこれをいくつかのコードを編集するように私に依頼してください 投稿

Answer 1

単一のイメージオブジェクトを使用して複数のイメージをキャンバスに描画するには、new Image()でイメージオブジェクトを作成し、それに応じてsrcプロパティを設定します。

また、<img src="">タグをHTMLコードに書き込んで、document.querySelectorで参照することもできます。

考慮すべき重要なものが1つあります。drawImageに電話する前に、ロード時間がない場合でも画像がロードされていることを確認する必要があります（例：localhostまたはdata-url）。

私の例では、アニメーションをすぐに開始しないことでこれを解決しました。代わりに、requestAnimationFrameループがimage onloadイベントで開始されます。

var R = Math.random 
 
var a = document.getElementById("a") 
 
var W = a.width = 400 
 
var H = a.height = 300 
 
var c = a.getContext("2d") 
 

 
var img = new Image() 
 
img.src = 'https://assets-cdn.github.com/images/icons/emoji/unicode/1f60d.png' 
 

 

 
function loop() { 
 
    var rndX = (R()*W)|0 
 
    var rndY = (R()*H)|0 
 
    c.drawImage(img, rndX, rndY) 
 
    requestAnimationFrame(loop) 
 
} 
 

 
img.onload=function() { 
 
    loop() 
 
}

body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<canvas id="a"></canvas>