HTML5 Canvas - 将图像分组/附加到画布

Question

使用这个 JS Fiddle 我可以按一个按钮将新的画布添加到屏幕...

var next = 4

    function addCanvas() {
        // create a new canvas element
        var newCanvas = document.createElement("canvas");
        newCanvas.id = "addedcanvases" + next; //added this to give each new canvas a unique id
        next++;
        newCanvas.width = canvasWidth;
        newCanvas.height = canvasHeight;
        // add a context for the new canvas to the contexts[] array
        contexts.push(newCanvas.getContext("2d"));
        // link the new canvas to its context in the contexts[] array
        newCanvas.contextIndex = contexts.length;
        // wire up the click handler
        newCanvas.onclick = function (e) {
            handleClick(e, this.contextIndex);
        };
        // wire up the mousemove handler
        newCanvas.onmousemove = function (e) {
            handleMousemove(e, this.contextIndex);
        };
        // add the new canvas to the page
        document.body.appendChild(newCanvas);
    }

问题：

将静态图像分组/附加到画布顶部的最佳方法是什么（如下图所示），以便每当在 中创建新画布时JS Fiddle 使用它自动创建一个图像，该图像被分组/附加到新画布的顶部。

这样无论何时在页面上动态创建新画布时，都会在该画布上方放置图像？

我可能忽略了一种明显的方法来做到这一点？但是谷歌搜索并没有抛出太多，因为所有“图像”和“画布”搜索都不可避免地与实际向画布添加图像有关——这不是我在这种情况下想要做的。

Answer 1

这里采用@KaliedaRik 的回答并使用 javascript 创建您的群组：

http://jsfiddle.net/m1erickson/3EUnc/

创建新组的代码可能是这样的：

function newGroup(){

    // create a new wrapper div
    var div=document.createElement("div");
    div.className="wrapper";

    // create an img and a canvas element

    var img=document.createElement("img");
    var br=document.createElement("br");
    img.style.width="50px";
    img.src="houseicon.png";
    var canvas=document.createElement("canvas");
    canvas.width=300;
    canvas.height=55;

    // add the img and canvas elements to the wrapper div

    div.appendChild(img);
    div.appendChild(br);
    div.appendChild(canvas);

    // add the wrapper div with its contained img + canvas to the page

    document.body.appendChild(div);

}

Answer 2

一种可能的解决方案：在创建canvas元素时，同时新建一个div，并放入canvas和img标签在里面。通过将 div 位置样式设置为相对样式，并将包含的 canvas 和 img 位置样式设置为绝对样式，您将能够将图像放置在需要去的任何位置。

<div style="position: relative">
    <canvas style="position: absolute; top: 0px; left: 0px;"></canvas>
    <img src="whatever" alt="whatever" style="position: absolute; top: -20px; left: 0px" />
</div>