HTML5画布 – 分组 将图像附加到画布上。

使用这个 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 会自动创建一张图片,并将其归类到新画布的顶部。

这样一来,每当页面上动态创建一个新画布时,图片就会被放在该画布的上方?

canvas with image grouped / attached to the top of them

可能有一个明显的方法来做到这一点,我忽略了吗? 但谷歌搜索并没有抛出很多,因为所有的 “图像 “和 “画布 “搜索不可避免地涉及到实际添加图像到画布 – 这不是我想在这个例子中做什么。

解决方案:

下面是采用@KaliedaRik的答案,用javascript创建你的组。

http:/jsfiddle.netm1erickson3EUnc。

创建一个新组的代码可以是这样的。

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

}

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/40678.html

(0)
上一篇 15小时前
下一篇 15小时前

相关推荐

发表评论

登录后才能评论