鸿蒙Canvas中如何绘制一个带有渐变色的矩形边框？

Question

我在尝试绘制一个矩形，并且希望它的边框是渐变色的。鸿蒙的Canvas API中是否支持这样的效果？如果支持的话，应该如何实现？请附上具体的代码示例，谢谢！

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

绘制带有渐变色的矩形边框需要一些技巧。你可以创建两个渐变对象，一个用于边框的顶部和左侧，另一个用于边框的底部和右侧。然后，通过绘制四条线段并使用不同的渐变颜色来实现。

下面是一个示例：

let ctx = canvas.getContext('2d');

// 创建两个渐变对象
let gradient1 = ctx.createLinearGradient(0, 0, 0, 100);
gradient1.addColorStop(0, 'red');
gradient1.addColorStop(1, 'yellow');

let gradient2 = ctx.createLinearGradient(0, 0, 100, 0);
gradient2.addColorStop(0, 'red');
gradient2.addColorStop(1, 'yellow');

// 设置边框宽度
ctx.lineWidth = 5;

// 绘制带有渐变色的矩形边框
ctx.beginPath();
ctx.strokeStyle = gradient1;
ctx.moveTo(50, 50);
ctx.lineTo(150, 50); // 顶部边框
ctx.lineTo(150, 150); // 右侧边框，此时会应用gradient1的渐变

ctx.strokeStyle = gradient2;
ctx.lineTo(50, 150); // 底部边框，此时会应用gradient2的渐变
ctx.lineTo(50, 50); // 左侧边框，继续应用gradient2的渐变
ctx.stroke();

在这个例子中，我们创建了两个线性渐变对象gradient1和gradient2，分别用于边框的顶部/左侧和底部/右侧。然后，我们设置了边框宽度，并使用beginPath和stroke方法来绘制矩形边框。注意，在绘制右侧边框和底部边框时，我们切换了渐变对象，以实现不同的渐变效果。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。