HTML5 Canvas & 处理器友好 - 如何创建此填充/遮罩？

Question

场景

在此交互中，假设用户点击了 canvas 上的四个位置。我希望我的填充遵循点击的确切顺序。 下面请考虑我的"demonstration"

绿线显示了我要填充的区域（红色是最小边界框，可以放心地忽略）。

我需要 clip/mask 区域，否则我会使用笔触（简单）。我还没有找到一种处理器友好的方法来将笔划转换为填充，或者我会使用它（这必须在移动设备上可用）。

问题

如何以编程方式为这些点击点生成绿色边界路径（填充）？我有一个 array 中的所有坐标 (mouseevents) 来循环。

代码

这是我要完成的简化笔画等效项 (jsfiddle)

var c = document.getElementById("c");
var ctx = c.getContext("2d");

ctx.moveTo(40, 40);
ctx.lineTo(180, 40);
ctx.lineTo(40, 180);
ctx.lineTo(180, 180);
ctx.lineWidth = 40;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.stroke();

Answer 1

整天都在处理这个问题。这是我想出的：

最重要的一块：

在将点保存到数组之前，您必须知道光标的当前方位/方向。这是至关重要的，如果你搞砸了，你将得到一条自行折叠的路径。

这是相关代码：

    var radians = null;
    var x2 = lastMouseEvent.clientX,
        x1 = currentMouseEvent.clientX,
        y2 = lastMouseEvent.clientY,
        y1 = currentMouseEvent.clientY

    radians = Math.atan2(y1 - y2, x1 - x2) * -1 // you can remove the -1 if everything is backwards for your app

将所有鼠标坐标收集到一个数组中，同时存储当前弧度 (inside/outside)
遍历数组，在路径的内侧画一条线，指针方向的因素
反转数组以在路径外开始绘制
将 INSIDE 轨道的最后一个点连接到 OUTSIDE 轨道的第一个点
再次遍历数组，在路径的外侧画一条线，指针方向的因素
将 OUTSIDE 轨道的最后一个点连接到 INSIDE 轨道的第一个点

如果你不确保所有的点都连接起来，你就不会得到完整的路径，这也行不通

根据轨道，您可以按照以下方式考虑方向：

var radians = [orientation radians stored in your array]
var diameter = [diameter you want your path to be]

var inside = {
    x: Math.sin(radians) * (diameter / 2),
    y: Math.cos(radians) * (diameter / 2)
}
var outside = {
    x: Math.sin(radians) * (diameter / -2),
    y: Math.cos(radians) * (diameter / -2)
}

你所做的就是将 x/y 值从你的尊重轨道添加到你当前循环通过的坐标。

是的，这很麻烦，但在所有设备上的性能都很好。 GL 高频

HTML5 Canvas & 处理器友好 - 如何创建此填充/遮罩？

HTML5 Canvas & Processor friendly - How can I create this fill / mask?

javascript

vector-graphics

html5-canvas