HarmonyOS鸿蒙Next中OffscreenCanvas createLinearGradient绘制渐变色，如何设置Angle角度？

HarmonyOS鸿蒙Next中OffscreenCanvas createLinearGradient绘制渐变色，如何设置Angle角度？

控件可以通过 Angle 属性进行设置角度，但是 Canvas 没有相关配置。

.linearGradient({
  angle: 140,
  direction: GradientDirection.Bottom,
  colors: [
    ['#ff6432', 0.128], // 渐变开始颜色和位置（0%）
    ['#ff0065', 0.4352], // 渐变结束颜色和位置（100%）
    ['#7b2eff', 0.8434], // 渐变结束颜色和位置（100%）
  ]
})

更多关于HarmonyOS鸿蒙Next中OffscreenCanvas createLinearGradient绘制渐变色，如何设置Angle角度？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以使用这个进行旋转：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5#rotate

更多关于HarmonyOS鸿蒙Next中OffscreenCanvas createLinearGradient绘制渐变色，如何设置Angle角度？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用OffscreenCanvas的createLinearGradient方法绘制渐变色时，Angle角度可以通过设置渐变的起点和终点坐标来实现。createLinearGradient方法接受四个参数，分别是起点的x、y坐标和终点的x、y坐标。通过调整这些坐标，可以控制渐变的方向和角度。

例如，如果你想要一个45度的线性渐变，可以将起点设置为(0, 0)，终点设置为(canvasWidth, canvasHeight)。这样，渐变将从左上角向右下角延伸，形成45度的角度。

具体代码如下：

const canvas = new OffscreenCanvas(200, 200);
const ctx = canvas.getContext('2d');

// 创建线性渐变，角度为45度
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);

// 添加颜色断点
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

// 应用渐变
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

通过调整createLinearGradient的起点和终点坐标，可以实现任意角度的线性渐变。

在HarmonyOS鸿蒙Next中，使用OffscreenCanvas的createLinearGradient方法绘制渐变色时，可以通过设置渐变的起点和终点坐标来控制角度。例如，要设置45度角，可以将起点设为(0, 0)，终点设为(100, 100)。具体代码如下：

let gradient = ctx.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 200);

通过调整起点和终点的坐标，可以实现任意角度的渐变效果。

回到顶部