Javascript Html5画布笔划透明渐变线

如何使用html5画布创建透明的渐变笔划？我需要它从一个点到另一个点，看起来像下图

目前，我得到了以下信息：

const gradient = ctx.createLinearGradient(1, 0, 100, 0);

gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#d29baf');

ctx.lineWidth = 30;
ctx.strokeStyle = gradient;
ctx.beginPath();
ctx.moveTo(fromXPos, fromYPos);
ctx.lineTo(toXPos, toYPos);
ctx.stroke();

这使它看起来像一个实心块，但类似于：

谢谢。

填充一个形状 使用一个形状并用渐变填充它

您可以使用CSS颜色类型

rgba（红、绿、蓝、阿尔法）

其中红、绿、蓝是0-255之间的值，阿尔法是0透明到1不透明

要创建形状，请从ctx.beginPath（）开始创建新形状，然后使用lineTo（x，y）标记每个角。如果要使用相同的填充或笔划添加另一个形状，请使用ctx.moveTo（x，y）移动到第一个点

注意许多人使用

ctx.beginPath（）；ctx.moveTo（x，y）但其工作原理与
ctx.beginPath（）相同；ctx.lineTo（x，y）moveTo


const ctx=canvas.getContext（“2d”）；
//绘制第一个框（画布左侧）
ctx.fillStyle=“#ab7383”；
ctx.fillRect（20100,50,50）；
//绘制第二个框（第一个框的右侧）
ctx.fillStyle=“#904860”；
ctx.fillRect（100,20,50130）；
//从第二个盒子顶部到两个盒子底部的渐变
常数g=ctx.createLinearGradient（0,20,0,150）；
g、 addColorStop（0，`rgba（${0xd2}，${0xba}，${0xaf}，1`）；//不透明
g、 addColorStop（1，`rgba（${0xd2}，${0xba}，${0xaf}，0`）；//透明
ctx.fillStyle=g；
ctx.beginPath（）；
ctx.lineTo（70100）；//第一个框的右上角
ctx.lineTo（100，20）；//第二个框的左上角
ctx.lineTo（100，150）；//第二个框的左下角
ctx.lineTo（70，150）；//第一个框右下角
ctx.fill（）；//填充形状
你还有问题吗？@Blindman67没有。我会在20小时内给你奖金。谢谢。