【问题标题】:html canvas sketch vs fill widthhtml画布草图与填充宽度
【发布时间】:2024-04-27 10:55:02
【问题描述】:

我注意到绘制一个盒子和填充一个盒子会导致不同大小的盒子。在处理命中检测时,这有点令人头疼。例如,如果我有一个正在绘制的圆和一个正在绘制的矩形,我想知道这两个是否相交以用于动画目的。有没有办法解决?一个简单的解决方案是将线宽设置为零,但这不是一个选项。

【问题讨论】:

    标签: html canvas width fill


    【解决方案1】:

    您需要将 lineWidth 添加到描边对象的计算中。

    调用fillRect(0,0,60,60) 会得到一个从(0,0) 开始的60x60 框,但如果您正在抚摸,则必须在每一边添加一半的线宽。

    所以使用6 的lineWidth 调用strokeRect(0,0,60,60) 确实会得到一个以(-3,-3) 开头的66x66 框。

    由于斜接,数学可能会略有不同,但对于大多数应用程序,您可以忽略这一点。

    一个简单的解决方案可能会或可能不会与您的程序一起运行,即为每个填充对象调用 fillRect 和 strokeRect。该对象将变得稍大,但它的大小将与您的描边对象保持一致。当然,这种方法的有效性完全取决于您到目前为止的编写方式。

    【讨论】:

    • 谢谢你,这正是我想要的。