获取绘图图像比 getElementById 更好的方法？答案

【问题标题】：Better way to get images for drawing than getElementById?获取绘图图像比 getElementById 更好的方法？
【发布时间】：2014-02-20 23:22:56
【问题描述】：

我对 w3 学校和画布元素相对较新，但现在我希望能够在画布上绘制图像。我查看了 w3 学校，他们使用的唯一示例包括 html 中的 img 标签，该标签是在 javascript 中使用 getElementById() 函数检索的。我想知道是否有更好的方法来做到这一点只使用 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 中使用标签。

【问题讨论】：

“更好的方法”是什么意思？通过 ID 查找有什么问题？你能举一个你试图避免的例子吗？（“更好的方法”也需要猜测和/或意见，这可能会使您的问题被标记。因此，请小心并尽可能提出更具体的问题。）
W3 Skoolz 是黑暗面

标签： javascript html image html5-canvas

【解决方案1】：

您可以在不接触 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 处理程序也是一个优点。

希望这会有所帮助。

【讨论】：

【解决方案2】：

好吧，您需要以某种方式检索画布引用，实际上就是这样做的。我不确定我是否理解您“仅使用 js”的说法，因为这是 JavaScript，只是与 HTML 元素交互。

您可以做的是从 JavaScript 创建您的画布元素，例如 this answer 节目

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");
}

【讨论】：

很抱歉，我意识到仅 js 并不完全准确，我的意思是是否有一种方法可以将图像添加到 javascript 而无需在 html 中使用标记。

【解决方案3】：

在 JavaScript 中有几种方法可以“了解”页面中存在的元素。

document.getElementById
根据您的文档结构，您可以遍历 DOM：document.body.children[0].children[3].children[1]（显然，这很丑陋，不太可能是您想要的。）
document.getElementsByTagName('canvas')[2] 在您的页面中获取第三个 <canvas>（请记住，数组是零索引的）。
按照@Streppel 的建议，您可以创建元素，保留 JavaScript 变量，然后将其附加到页面。
document.querySelector("canvas[width=250][height=300]") 使用 CSS 查找您的元素。

【讨论】：