学习如何使用 HTML5 画布实际绘图答案

【问题标题】：Learning how to actually draw with HTML5 canvas学习如何使用 HTML5 画布实际绘图
【发布时间】：2011-10-01 14:11:34
【问题描述】：

我正在尝试学习如何在画布上绘制，我阅读了很多资源，这些资源都教你有关 API 以及如何使用它来绘制等，我在那里找到了很好的资源，问题是现在我知道如何使用API方法绘制但我仍然无法弄清楚如何绘制！

不要误会我的意思，我不期待学习艺术概念等，我说的是简单的形状，例如心形或钻石，我如何计算坐标，x和y 我知道如何绘制弧线但如何通过示例找出控制点坐标？

在矢量绘图软件中，您在绘图时会获得视觉反馈，我知道使用画布更难更复杂，但我不知道应该如何或如何提高这种能力。我什至不知道我需要提高什么能力......

我一定要数学好吗？

任何人都可以指导我找到真正学习如何绘制 HTML5 Canvas 的正确方法吗？

【问题讨论】：

【解决方案1】：

数学好是有帮助的。绘制“特殊”形状就是将它们定义为您已经知道如何绘制的形状。例如，一颗心是带有 2 条对角线的 2 条弧线，我相信您知道如何绘制。菱形是 4 条对角线，其中每 2 条相对的线平行，并且它们的长度都相等。

【讨论】：

谢谢，我知道如何将心划分为简单的形状，但我不知道如何获得每个形状的坐标？我必须先把它画在纸上然后测量所有东西才能得到每个形状的 x 和 y 吗？
@Stacker：我觉得你太害怕了——试试吧。如果你画了一个菱形，上面有(20, 10)，还有一个点(40, 50)，那么你可以推导出其他点：jsfiddle.net/eGjak/148。
@pimvdb 实际上定义一个菱形需要 3 个点 :) （可以用顶部和底部点定义无限的菱形）。但我的意思是，如果你画一个角度为 6pi/11 的圆弧，你可以通过使用 sin/cos 的简单数学来推断终点。
这一切都取决于您如何看待和理解它。真的没那么复杂。