<!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();
}
「