画像とそのソースを変数に格納するより短い方法を見つけたいと思います。
次のようになります。
ctx = document.getElementById("canvas").getContext('2d');
しかし、次の場合:
var img = new Image();
img.src = "image.png";
最初の例のように、これを 1 行で行うことはできますか?
画像とそのソースを変数に格納するより短い方法を見つけたいと思います。
次のようになります。
ctx = document.getElementById("canvas").getContext('2d');
しかし、次の場合:
var img = new Image();
img.src = "image.png";
最初の例のように、これを 1 行で行うことはできますか?
Image
基本的に、コンストラクターがURLを引数として受け入れることができるかどうかを尋ねているようです。答えはいいえだ。もちろん、次の関数を書くことができます。
function createImage(src) {
var img = new Image();
img.src = src;
return img;
}
...そしてそれを使用します:
var img = createImage("image.png");
これらの画像でイベントを使用したい場合は、返されたload
ものをフックすることは信頼できないため、関数はそれをサポートする必要があります。(競合状態があります。ブラウザは、設定後、イベントをフックする前にイベントを発生させることができます—はい、JavaScript自体はブラウザでシングルスレッドですが。)これは次のようになります。load
Image
load
src
function createImage(src, loadHandler) {
var img = new Image();
if (loadHandler) {
img.load = loadHandler;
}
img.src = src;
return img;
}
...そしてそれを使用します:
var img = createImage("image.png"); // No `load` handler
// or
var img = createImage("image.png", handler); // Using a `load` handler
// or
var img = createImage("image.png", function() { // Using an inline `load` handler
// ...the image loaded...
});
の代わりにObject.createを使用してオブジェクトを新規作成することもnew
できます。
var img = Object.create(Image.prototype, {src: {value: "image.png"}});