キャンバスを使用して別のイメージにイメージを描画する方法

Question

私は、キャンバスを使用して別のイメージにピンポイントイメージをプロットする作業を行っています。私はキャンバスを初めて使っています。親切に私にこのことを教えてください。

私はimg要素をキャンバスにコピーしました。今私はそのキャンバスオブジェクトの上に別のイメージを配置しようとしていますが、動作していません。

ここは私のFiddleです。

HTML：

<p>Image to use:</p> 
<img id="scream" src="https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png" alt="The Scream" width="220" height="277"> 

<p>Canvas to fill:</p> 
<canvas id="myCanvas" width="250" height="300" 
style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<p><button id="button1">Copy Imange</button></p> 
<p><button id="button2">Draw OVer copied image</button></p> 

コード：

$("#button1").click(function(){ 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("scream"); 
    ctx.drawImage(img,10,10); 
    }); 

    $("#button1").click(function(){ 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.drawImage("https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png",10,10); 
    }); 

Answer 1

問題がいくつかあります。まず、イベントをクリックすると、両方とも要素$("#button1")が検索されます。私は2番目のクリックイベントがあると仮定しています$("#button2")

次の問題は、2番目のクリックイベントで、URLから画像へdrawImageを使用しています。あなたは、新しいイメージを作成し、そのようにソースプロパティを設定する必要があり、直接それを行うことはできません。

var img2 = new Image(); 
img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'; 

をまた、あなたは唯一のことを行う必要があり、すべてのクリックにキャンバスとコンテキストを設定するべきではありません一度。完全な例を次に示します(working example)：

$(document).ready(function(){  
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("scream"); 
    var img2 = new Image(); 
    img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'; 

    $("#button1").click(function(){ 
     ctx.drawImage(img,10,10); 
    }); 

    $("#button2").click(function(){ 
     ctx.drawImage(img2,10,10); 
    }); 
});