キャンバスに画像を追加するにはどうすればよいですか？

-3

私は私のキャンバスに画像を追加する方法を理解しようとしてきたが、私が試したすべてが働いていません。何か案は？キャンバスに画像を追加するにはどうすればよいですか？

HTML：

<body> 
<canvas id="gl-canvas" width="800" height="600" style="float:left"></canvas>

私は別のJSファイルを持っているが、私は正確に関数を適用する方法を見つけ出すことができないので、私はそれをここに追加して、その必要はないと思います。

私はこれに似たものを適用しようとしてきた：

var canvas = document.getElementById('gl-canvas'), 
context = canvas.getContext('2d'); 

make_base(); 

function make_base() 
{ 
    base_image = new Image(); 
    base_image.src = 'img/base.png'; 
    base_image.onload = function(){ 
    context.drawImage(base_image, 100, 100); 
    } 
}

私はi「は、2D」要素のための変数を作成する必要がある場合はわかりません。思考？

PS。これは私の最初の質問です。だから間違ってしまったのはごめんなさい。助けてくれてありがとう！

出典

2017-12-02 Brian Arias

あなたはappendChildを使用してキャンバスに画像を追加する必要があります。

var canvas = document.getElementById('gl-canvas'), 
 
context = canvas.getContext('2d'); 
 

 
make_base(); 
 

 
function make_base() 
 
{ 
 
    var base_image = new Image(); 
 
    base_image.src = 'http://via.placeholder.com/350x150'; 
 
    base_image.onload = function(){ 
 
    context.drawImage(base_image, 100, 100); 
 
    canvas.appendChild(base_image); 
 
    } 
 
}

<canvas id="gl-canvas" width="800" height="600" style="float:left"></canvas>

出典

2017-12-02 05:02:46

キャンバスに画像を追加するにはどうすればよいですか？

答えて

関連する問題