2016-08-29 16 views
-1
<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 

    <canvas id="spriteCanvas" width="500" height="500"> 
     <img id="coin" width="440" height="40" src="coin.png"> 
    </canvas> 

</body> 
</html> 

キャンバス要素内に画像を配置しようとしましたが、ブラウザに表示されませんでした。キャンバス要素の外側に配置すると画像タグが表示されるため、イメージタグが機能することはわかっています。キャンバス要素を調べると、画像は内部にあるが、その寸法は0であることがわかります。キャンバス内に画像が表示されない

EDIT:私の元のコードは、JavaScriptを使用して画像を追加しましたが、キャンバスには表示されません。それは私に上記と同じ問題を与えていた。しかし、私は "onload"が欠けていることに気付いた。

元のコード:

var coinImage = new Image(); 
coinImage.src = "coin.png"; 
var sCanvas = document.getElementById('spriteCanvas'); 

function Sprite(canvas, width, height, image){ 
    this.context = canvas.getContext("2d"); 
    this.width = width; 
    this.height = height; 
    this.image = image; 
} 

Sprite.prototype.render = function() { 
    var that = this; 
    this.context.drawImage(that.image, 0, 0); 
} 

function init() { 
    var coin = new Sprite(sCanvas, 100, 100, coinImage); 
    coin.render(); 
} 

init(); 

edittedコード:

var coinImage = new Image(); 
coinImage.src = "coin.png"; 
var sCanvas = document.getElementById('spriteCanvas'); 

function Sprite(canvas, width, height, image){ 
    this.context = canvas.getContext("2d"); 
    this.width = width; 
    this.height = height; 
    this.image = image; 
} 

Sprite.prototype.render = function() { 
    var that = this; 
    this.context.drawImage(that.image, 0, 0); 
} 

coinImage.onload = function() { 
    var coin = new Sprite(sCanvas, 100, 100, coinImage); 
    coin.render(); 
} 
+0

」タグの使用方法を参照してください。これは動作しません。キャンバス上にHTML要素を配置するのではなく、キャンバス上に描画します。 –

答えて

1

これは<canvas>タグがどのように動作するかではありません。イメージをキャンバスに表示するには、JavaScriptを使用してイメージのピクセルをキャンバスに配置する必要があります。

<canvas>は、カンバスの状態を正確に表しています。それらはプログラムで描画するための要素です。ページにイメージを表示したいだけの場合は、キャンバスは必要ありません。ちょうど<img>タグが必要です。実際には、要素は<canvas>に配置しないでください。

CanvasRenderingContext2D.drawImage()とこのチュートリアル:HTML5 Canvas Image Tutorialをご覧ください。

そして、このスニペット:

var canvas = document.getElementById("painting"), 
 
    ctx = canvas.getContext("2d"), 
 
    image = new Image(); 
 

 
image.onload = function() { 
 
    ctx.drawImage(image, 30, 50); 
 
}; 
 

 
image.src = "http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.png?v=10a9e8743fb0";
<canvas id="painting" width="300" height="300"></canvas>

1

キャンバスに画像を描画するには、次のメソッドを使用します。あなたが描きたいイメージがない場合には

drawImage(image,x,y) 

をDOMでは既に数行のjavascriptでURLから直接画像を読み込むことができます。

function loadAndDrawImage(url) 
{ 
    // Create an image object. This is not attached to the DOM and is not part of the page. 
    var image = new Image(); 

    // When the image has loaded, draw it to the canvas 
    image.onload = function() 
    { 
     // draw image... 
    } 

    // Now set the source of the image that we want to load 
    image.src = url; 
} 
loadAndDrawImage("http://www---.png"); 
関連する問題