HTML帆布/Trix.js根据第二层形状在第一层（由多个形状组成）上应用夹子路径和不透明度

Question

html帆布或三个

。解决方案，很可能是因为我是三分之二/html帆布的新手，这是关于如何接近这一点的建议。

上下文：这是演示文稿网站上的动画，当动画启动层时，在动画结束时，上下旋转并旋转旋转，用户可以悬停在形状的顶部，而该区域徘徊在第一层（一个带有点的）将点推在轴上。

我的问题：

1. 如何用圆角绘制等边三角形并添加光泽效果？（我搜索了文档并乘以答案但找不到解决方案），
2. 我设法构建了第一层的功能作为一个平方并整合了悬停效果，但是我找不到使第一层作物/剪辑路径/减少未包含在顶层阴影中的点的不透明度的解决方案。 所以我的问题是，如何使底层点样式取决于顶层的克隆？
3. 这是正确的方法吗？我计划了：创建顶层三角形，创建底层作为点正方形，克隆在点的底部正方形的顶部三角形，然后将其位置稍微移动以表示阴影，然后循环穿过点，然后检查它们是否在克隆中顶层三角形（在这里，我可以在内部/外部/靠近三角形的克隆的点上使用不透明的夹子和剪贴路径/农作物）。
4. 对于我需要的东西太多了，我应该尝试使用常规的HTML帆布吗？

谢谢您的时间和友善！一个显示如何开始或概念证明的代码样本将非常有帮助。

Answer 1

我会说使用三分。一个普通的html ＆lt; canvas＆gt; 元素与它的图形方法结合使用，将正确地做到这一点。

但是 - 开箱即用 CanvasRenderingContext2d 没有内置的方法可以圆角。这是必须使用一些三角学完成的事情。

为了获得更好的图片，可以说我们有一个三角形的要点：

a =（50,50）; b =（250,100）; C =（50,350）

这不是等边三角形，而是该概念当然适用于任何三角形。
在屏幕上，这将类似于这样的形状：

如果考虑到它，请在点上有一个圆角 b ，必须有一条曲线从侧面 c 到点 b 到侧面 a 。但是在哪里？

让我们在 b 点上覆盖半径20的绿色圆圈。

我们可以看到圆的相交与侧面 c 和side a 应该分别是曲线的起点和终点。由于半径为20，我们需要从点 b 沿点 a 的方向传播20个像素，而同样从点 b 也可以从点方向 c 。该方向由两个特定点之间的角度给出，可以使用 MATH.ATAN2（pointb.x-pointa.x，pointb.y-pointa.y）方法获得。

如果我们计算这两个点 - 并重复三角形的其余两个顶点的过程 - 并使用 bezierCurveto（）方法绘制曲线，我们终于有了圆角。

就是您问题的第一部分。

为了使三角形的大纲具有发光的外观，我们可以使用内置的过滤器效果。 blur（）过滤器模仿光芒很好。背景中三角形的重复模式也不难。画布上的封闭形状可以通过使用 createpattern（）方法创建的自定义模式填充。我们需要做的就是在中间用黑色圆圈绘制一个无缝的瓷砖。为此，我们可以使用 document.createelement（“ Canvas”）创建一个临时＆lt; canvas＆gt; 均等宽度和高度的要素，并使用绘制一个圆圈arc（）方法。

这是一个完整的示例：

let triangle = {
  a: {
    x: 50,
    y: 50
  },
  b: {
    x: 250,
    y: 100
  },
  c: {
    x: 50,
    y: 350
  }
};

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let cornerRadius = 60;

let corners = [
  [triangle.a, triangle.b, triangle.c],
  [triangle.b, triangle.c, triangle.a],
  [triangle.c, triangle.a, triangle.b]
]

function drawTriangle(offsetX = 0, offsetY = 0) {
  ctx.beginPath();
  let angle, corner, pA, pB;
  let segments = [];

  for (let a = 0; a < corners.length; a++) {
    corner = corners[a];
    angle = Math.atan2(corner[1].x - corner[0].x, corner[1].y - corner[0].y) + Math.PI;
    pA = {
      x: corner[1].x + offsetX + Math.sin(angle) * cornerRadius,
      y: corner[1].y + offsetY + Math.cos(angle) * cornerRadius
    }

    angle = Math.atan2(corner[1].x - corner[2].x, corner[1].y - corner[2].y) + Math.PI;

    pB = {
      x: corner[1].x + offsetX + Math.sin(angle) * cornerRadius,
      y: corner[1].y + offsetY + Math.cos(angle) * cornerRadius
    };
    segments.push(pA)
    segments.push({
      x: corner[1].x + offsetX,
      y: corner[1].y + offsetY
    });
    segments.push(pB);
  }

  let temp;
  ctx.moveTo(segments[0].x, segments[0].y);
  for (let a = 0; a < segments.length; a += 3) {
    temp = a + 3 == segments.length ? 0 : a + 3;
    ctx.bezierCurveTo(segments[a + 1].x, segments[a + 1].y, segments[a + 1].x, segments[a + 1].y, segments[a + 2].x, segments[a + 2].y);
    ctx.lineTo(segments[temp].x, segments[temp].y);
  }

  ctx.closePath();
}

function createPattern() {
  let tempCanvas = document.createElement("canvas");
  let tempContext = tempCanvas.getContext("2d");
  let radius = 3;
  tempCanvas.width = 12;
  tempCanvas.height = 12;
  tempContext.beginPath();
  tempContext.arc(tempCanvas.width / 2, tempCanvas.height / 2, radius, 0, 2 * Math.PI);
  tempContext.fill();
  tempContext.closePath();

  return ctx.createPattern(tempCanvas, 'repeat');
}

let rad = 0;
let radius = 25;
let fillPattern = createPattern();

function animate() {
  ctx.fillStyle = "#ecebcc";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = fillPattern;
  ctx.save();
  ctx.translate(Math.sin(rad) * radius, Math.cos(rad) * radius);
  drawTriangle();
  ctx.fill();
  ctx.restore();
  ctx.lineWidth = 7;
  ctx.strokeStyle = "#378f43"
  ctx.filter = "blur(10px)";
  drawTriangle();
  ctx.stroke();
  ctx.filter = "none";
  ctx.lineWidth = 1;
  drawTriangle();
  ctx.stroke();
  rad += Math.PI / 180;
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

<canvas id="canvas" width="400" height="400"></canvas>