在画布中使用Accordion

Question

当我们使用手风琴时，我们使用div中的id来调用它

<div id="accordion">

我想要做的是在canvas元素中使用accordion。 Canvas标签已经调用了它的id，我不知道如何解决这个问题。

主要目的是在左侧有一个区域，图像分为三个部分，将放在手风琴中。在右边，我在另一个canvas元素中绘制了一个网格。这是图像将被丢弃的地方。 这是代码，我停在这里，我不知道为什么jsfiddle只显示一个画布，虽然网格的绘图是正确的。我为我糟糕的代码道歉。

http://jsfiddle.net/uS4er/4/

Answer 1

jQueryUI手风琴wiget无法在html画布中运行。

另一个计划：

你可以在画布的外面和左边创建你的image-source-accordion。

然后使用jQuery draggable plus canvas作为dropzone从工具箱中复制图像并在画布上绘制。

此链接显示如何使用jqueryUI draggable在画布上“删除”img元素：

Drag controls from container and drop/draw them on canvas

Answer 2

不确定这是否是您想要的结果，但这会在<div id="accordion">元素或画布上的任何其他内容上呈现<canvas>。的 http://jsfiddle.net/L93gA/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
    "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size: 12px;' id='accordion'>" +
                 "Content of accordion" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;

基于https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

上的示例