HTML5 Canvas层到HTML / CSS代码

Question

我有一个画布，可以在其中添加多个图层（文本和图像），并以此来制作模板。 最后，我想达到的目的是，当我添加一个图层时，将创建一个HTML / CSS块，其中包含该图层的属性，这些属性是：

• X
• ÿ
• 宽度
• 高度
• 字形
• 字体大小
• 字体颜色
• 角度
• 内容

最后，我想实现以下目的：当我添加一个图层时，将创建一个代码块，并且当我通过例如移动它来更改任何图层属性时，代码也应同时更改；当我更改代码时，则该图层应该在画布上进行相应的更改。

我已经搜索了很多类似的东西，但找不到任何东西。 如果有人知道我该怎么做（如果可能的话），那就太好了！

我的画布的工作示例可以在这里找到：
http://codepen.io/anon/pen/HvLDs （如果在添加图层后它什么都不做，请尝试刷新）

代码的橡皮泥：
http://pastebin.com/uRqiKzGd
http://pastebin.com/CXF6DtyC

Answer 1

您使用了错误的技术。 HTML5 Canvas不会记录您在DOM中添加的元素，而更像是一种“ Fire and Forget”技术。 渲染后，实际上就已经丢失了。

另一方面，如果您查看SVG，则每个SVG项目都有一个DOM表示形式，您可以使用CSS清楚地看到它，对其进行操作和设置样式。 与尝试使用Canvas相比，分层SVG将是解决此问题的一种更合适的方法。

为了说明这一点，下面是渲染Canvas圆的一些示例代码：

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'red';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
</script>

但是，最终的DOM如下所示：

<canvas id="myCanvas" width="578" height="200"></canvas>

如果将其与SVG进行比较，您将在DOM中获得实际的圆：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>