用颜色填充 T 恤并在 HTML 画布上相应地更改文本颜色答案

【问题标题】：Fill t-shirt with color and change text color accordingly on HTML canvas用颜色填充 T 恤并在 HTML 画布上相应地更改文本颜色
【发布时间】：2014-10-29 01:08:26
【问题描述】：

我已经在画布上绘制了一件 T 恤，我目前正在尝试在用户在上面的菜单中选择一种颜色时对其进行填充。此外，我希望 T 恤上的文字相应更改（例如，如果选择黑色，则 T 恤文字颜色应为白色）。这可能吗？

到目前为止的代码片段：

<body>T-shirt color
    <br>
    <canvas id="toolsCanvas" width=300 height=53></canvas>
    <br>
    <p>
        <canvas id="drawingCanvas" width="520" height="0"></canvas>
        <canvas id="itemCanvas" width="520" height="429"></canvas>
</body>

这里会更容易证明我在说什么，jsFiddle：http://jsfiddle.net/rtnq8mjL/

【问题讨论】：

是的，应该可以。您已经掌握了基本概念：只需执行 ctx.fill() 以响应颜色选择事件。看起来您需要为衬衫的主体定义一个封闭区域（手臂、领子等都已关闭，但按钮似乎没有）。
我可以使用ctx.fill().. fiddle 填充它。您应该填写每个关闭路径。我实现了一个 setColor() 函数。检查以了解情况。
一直在玩它，但你基本上错过了中心部分，因为你的线条在那部分并没有真正关闭。
发生这种情况是因为线条没有正确闭合衬衫，我已经走到这一步了 -> jsfiddle.net/rtnq8mjL/4，但我需要一秒钟来追踪线条。跨度>
你只需要画中心部分，我开始了，但你可以用贝塞尔曲线等自己完成 -> jsfiddle.net/rtnq8mjL/5

标签： javascript jquery css

【解决方案1】：

您应该使用ctx.fillStyle = color 和ctx.fill() 方法来填充这件衬衫。但不知怎的，这件衬衫并没有完全填满颜色。

这里是partially completed fiddle。

我希望你能从这里解决这个问题。

【讨论】：

感谢您让我走上正轨，我想@adeneo 正在研究为什么衬衫没有完全填满