代笔 - 需要更大的画布

Question

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

我想修改代码，以便用户可以在文章的任何位置绘制，而不是为用户提供一个矩形沙箱。例如，想象一篇关于生理学的文章有三十几段。他们可以强调或突出显示任何单词或在边缘画一个小图片。可以这样做吗？

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

这个特殊的脚本在div中有两个画布......

<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;
}

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