可以将画布绘图渲染到 div 中吗？答案

【问题标题】：possible to render canvas drawing into div?可以将画布绘图渲染到 div 中吗？
【发布时间】：2012-01-20 12:54:27
【问题描述】：

我正在尝试在 HTML5 画布上绘制一个形状，但该形状出现在一个 div 中（可以通过 javascript 操作）。我怎样才能做到这一点？我会发布代码，但我什至不知道从哪里开始。请帮忙。

澄清一下：我希望将画布上呈现的形状放置在 div 中。如有任何混淆，请见谅。

【问题讨论】：

把画布放在一个div里？你想要什么？
您可以像使用 <div>-elements 一样使用 JavaScript 操作 <canvas>-element（内容除外）。
@pimvdb--我希望将画布上呈现的形状放置在 div 中。抱歉，应该说得更清楚。
@Jonas--ah.. 操作画布的内容正是我想要做的。我想我必须制作多个画布并将每个画布放在一个 div 中？
你假设必须制作多个画布并将每个画布放在一个 div 中。

【解决方案1】：

Mozilla 绘图：https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes

<div>
  <canvas id="my_canvas"></canvas>
</div>

<script>
   var canvas = document.getElementById('my_canvas');
   // Set width height.  You should probably use the width/height of the div.
   canvas.width = 300;
   canvas.height = 300;
   var ctx = canvas.getContext('2d');
   //  Draw something with ctx.....
   //  ....
</script>

【讨论】：

【解决方案2】：

您可以使用库 Canvas2Image。它将允许您将画布上的内容转换为图像。每个浏览器都有一些怪癖，但这是最接近您想要做的事情，而无需在您的页面上放置许多您一前一后更新的画布元素。

【讨论】：