代笔 - 需要更大 canvas

Question

我刚开始学习 html5 的 canvas 属性。我发现了一个很棒的程序@ https://developer.mozilla.org/en-US/demos/detail/ghostwriter-art-studio/launch 允许用户绘制图片，从各种工具和颜色中进行选择。

我想修改代码，而不是给用户一个矩形沙盒来玩，他们可以在文章的任何地方画画。例如，假设一篇关于生理学的文章有三打段落。他们可以在任何单词下划线或突出显示，或在页边空白处画一张小图。这能做到吗？

事实上，我已经修改了代码，它的工作几乎完美......除了我仍然被锁在一个矩形盒子里。

这个特定的脚本在 div...

中有两个 canvases

<div id="drawing">
  <canvas id="artboard" width="750" height="500"></canvas>
  <canvas id="workboard" width="750" height="500"></canvas>

将高度更改为 100% 无效。如果我将#artboard 的高度更改为 2500px，垂直绘图区域实际上会缩小。

我不确定 Ghostwriter 是否是唯一可用的绘图脚本；我还没有想出一个好的搜索词。不管怎样，谁能告诉我如何使垂直绘图区域更大，或者推荐我可以查看的另一个脚本？

Answer 1

除了HTML中的#drawing变化外，您还需要相应地调整CSS：

/* index.html */
<div id="drawing">
  <canvas id="artboard" width="1750" height="800"></canvas>
  <canvas id="workboard" width="1750" height="800"></canvas>

/* main.css */
#drawing {
  position: absolute;
  top: 0;
  right: 0;
  width: 1750px;
  height: 800px;
  background: #eee url(images/paper3.jpg);
  box-shadow: 1px 1px 5px #000;
  cursor: url(images/chrome_cursor.png), none !important;
}

#artboard, #workboard {
  position: absolute;
  top: 0;
  left: 0;
  width: 1750px;
  height: 800px;
}

通过这样做，我能够在水平和垂直方向上增加绘图区域：

代笔 - 需要更大 canvas

Ghostwriting - need bigger canvas

javascript

css

jquery

canvas