javascript - HTML5 Canvas 层到 HTML/CSS 代码

Question

我有一个 Canvas ，我可以在上面添加多个图层(文本和图像)，我用它来制作模板。我最后想要实现的是，当我添加一个层时，将创建一个包含该层属性的 HTML/CSS block ，这些属性是:

• X
• 是
• 宽度
• 高度
• 字体
• 字体大小
• 字体颜色
• Angular
• 内容

最后我想实现的是，当我添加一个层时，将创建一个代码块，当我通过移动它来更改任何层属性时，代码也应该被更改，当我更改代码时那么图层应该在 Canvas 上相应地改变。

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

可以在这里找到我的 Canvas 的工作示例:
http://codepen.io/anon/pen/HvLDs (如果添加图层后它没有任何作用，请尝试刷新)

代码的Pastebins:
http://pastebin.com/uRqiKzGd
http://pastebin.com/CXF6DtyC

Answer 1

您使用了错误的技术。 HTML5 Canvas 不会记录您在 DOM 中添加的元素，它更像是一种“即发即弃”技术。一旦你渲染了它，你就基本上失去了它。

另一方面，如果您查看 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>