HTML5 canvas
プログラムでを描画する際に、いくつかの競合状態を発見しましたJavaScript
。これらは、画像をロードする前に変更しようとしたときに発生し、次の手法を使用してほとんどを修正できました。
var myImage = document.createElement('img');
myImage.onload = function(){
console.log("image src set!");
};
myImage.src="img/foobar.png";
いくつかの画像の 1 つに対してこの操作を行っていますが、奇妙なことが起こっています。基本的に、イメージはロードされる前にキャンバスに描画されます。ブール値を使用して画像がまだ描画されているかどうかを指定することで、問題を回避しようとさえしました。出力を含む私のコードは次のとおりです。コンテキストを理解するために、このコードはキャンバスを更新するために毎秒呼び出される関数の一部です。
if (!at_arrow_black)//one of two images used to show an arrow on the canvas
{
at_arrow_black = document.createElement('img');
at_arrow_black.onload = function() {
if (foregroundColor === "black")//which image to draw depends on the foreground color
{
console.log("black load");
context.drawImage(at_arrow_black, canvas.width*.775, canvas.height*.66, canvas.width*.075, font*4/5);
}
};
at_arrow_black.src = "img/at_arrow.png";
}
else
{
if (foregroundColor === "black")
{
if (hasDrawnArrow)//this starts as false
{
console.log("1. black draw");
context.drawImage(at_arrow_black, canvas.width*.775, canvas.height*.66, canvas.width*.075, font*4/5);
}
else
{
logDebug("2. black draw");
hasDrawnArrow = true;
}
}
}
これにより、キャンバスは最初に 1 つの矢印を描画し、次にこのループの最初の繰り返しで (わずかに異なる場所で) もう 1 つの矢印を描画します。私が得る出力:
2. black draw
black load
1. black draw
これは予想される出力ですが、キャンバスが画像を描画するのはなぜですか? これはある種の競合状態ですか?修正するにはどうすればよいですか?