比getElementById更好的獲取圖像以進行繪制的方法？

Question

我對w3學校和canvas元素比較陌生，但現在我希望能夠在畫布上繪制圖像。 我查看了w3學校，他們使用的唯一示例包括html中的img標簽，該標簽是使用getElementById（）函數在javascript中檢索的。 我想知道是否有更好的方法僅使用js來做到這一點。 如果不清楚這里是我指的是什么，我在下面有一個例子。

要使用的圖片：

<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>

到目前為止，我發現的唯一功能方法涉及在html中使用標記。

Answer 1

好吧，您需要以某種方式檢索畫布引用，實際上是這樣完成的。 我不確定我是否理解您的語句“僅使用js”，因為這是 JavaScript，僅與HTML元素進行交互。

您可以做的就是從JavaScript創建畫布元素，如下面的答案所示

function createContext(width, height) {
    var canvas = document.createElement('canvas');
    canvas.width = width; // where 'width' is a value
    canvas.height = height; // where 'height' is a value
    return canvas.getContext("2d");
}

Answer 2

JavaScript中有幾種方法可以“了解”頁面中存在的元素。

1. document.getElementById
2. 根據您的文檔結構，您可以遍歷DOM： document.body.children[0].children[3].children[1] （顯然，這很丑陋，不太可能找到您想要的東西。）
3. document.getElementsByTagName('canvas')[2]獲取頁面中的第三個<canvas> （請記住數組是零索引的）。
4. 按照@Streppel的建議，您可以創建元素，保留JavaScript變量，然后將其附加到頁面。
5. document.querySelector("canvas[width=250][height=300]")使用CSS查找您的元素。

Answer 3

您可以動態創建圖像而無需接觸DOM。 但是請注意，圖像加載是異步的，因此您需要對應用程序進行建模，以在圖像加載（或失敗或中止）時處理回調。

因此，如果要加載許多圖像，則可能要考慮使用圖像加載器（有關一個加載器的示例，請參閱我的個人資料-還有更多適合您的口味的加載器）。

但是，如果您想自己加載圖像，可以使用以下方法：

// create the image element
var img = new Image;

// attach functions (callbacks) to handle image when loaded (or failed)
img.onload = myImageHandler;
img.onerror = myErrorHandler;

// set source last to start loading
img.src = myImageUrl;

現在將加載圖像並myImageHandler() （假設成功）。 從這里繼續您的代碼：

function myImageHandler() {

    // object 'this' represents the loaded image - use that if you load
    // many images and share the handler

    // draw image onto canvas (assuming ctx is defined as context)
    ctx.drawImage(this, 0, 0);

    // continue code from here...
}

我沒有顯示錯誤處理程序，但是它基本上與上面的相同，只是您處理了向用戶顯示消息或有一些后備的錯誤。

如果需要加載許多圖像，則需要跟蹤加載的圖像而不是加載的圖像。 幸運的是，它沒有那么復雜：

// setup array with URLs and one to hold the image objects
var imageURLs = [url1, url2, url, ...],
    images = [],
    count = imageURLs.length,
    i = 0, url;

// define a common handler
function loaded() {

    // decrease counter
    count--;

    // when 0 all images has loaded
    if (count === 0) {
        nextStepInCode(); // pseudo function
    }
}

// invoke image loading:
for(; url = imageURLs[i++];) {

    // create a new image and push to element stack
    var img = new Image;
    images.push(img);

    // set handler
    img.onload = loaded;

    // invoke loading
    img.src = url;
}

// code continues here before images has loaded, but you need
// to continue in the callback (loader)

同樣在這里，您需要添加一個錯誤處理程序，該錯誤處理程序還會減少計數器（否則您將無法繼續）。 一個onabort處理程序也是一個onabort 。

希望這可以幫助。