HarmonyOS 鸿蒙Next Canvas，DrawingRenderingContext如何实现渐变的效果

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Canvas，DrawingRenderingContext如何实现渐变的效果

类似Android中给Paint设置Shader的效果，LinearGradient渐变这种效果。 https://blog.csdn.net/chuyouyinghe/article/details/126382457


更多关于HarmonyOS 鸿蒙Next Canvas，DrawingRenderingContext如何实现渐变的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

首先定义一个DrawingRenderingContext

context: DrawingRenderingContext = new DrawingRenderingContext()

核心绘制代码如下： 

const canvas = this.context.canvas;

//线性渐变的起点
const startPt: common2D.Point = { x: 0, y: 0 };
//线性渐变的终点
const endPt: common2D.Point = { x: canvas.getWidth(), y: 0 };
//创建线性渐变，或者其他渐变
const shaderEffect = drawing.ShaderEffect.createLinearGradient(startPt, endPt, [0xFFFF0000, 0xFFFFFF00],  drawing.TileMode.CLAMP);
//这里看需要用Brush还是Pen
const brush = new drawing.Brush();
brush.setAntiAlias(true);
//设置渐变
brush.setShaderEffect(shaderEffect);
//绑定笔刷
canvas.attachBrush(brush);
//绘制内容
canvas.drawRect({ left: 0, right: canvas.getWidth(), top: 0, bottom: canvas.getHeight() })
canvas.detachBrush();

更多关于HarmonyOS 鸿蒙Next Canvas，DrawingRenderingContext如何实现渐变的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


CanvasGradient控制渐变色的一个方向，可通通过使用createLinearGradient创建一个线性渐变色，通过四个参数控制渐变色的方向。如下示例可以实现一个从下到上的线性渐变。 参考demo:

深色代码主题
复制
Canvas(this.context) 
        .width('100%') 
        .height('100%') 
        .backgroundColor('#ffff00') 
        .onReady(() => { 
          let grad = this.context.createLinearGradient(200, 400, 200, 0) 
          grad.addColorStop(0.6, '#ff0000') 
          grad.addColorStop(1, '#ffeeee') 
          this.context.fillStyle = grad 
          this.context.fillRect(0, 0, 400, 300) })

参考连接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5#createlineargradient

DrawingRenderingContext组件文档里不支持渐变

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-drawingrenderingcontext-V5

在HarmonyOS鸿蒙系统中，Next Canvas的DrawingRenderingContext实现渐变效果，主要通过Gradient类及其相关方法来实现。以下是实现渐变效果的基本步骤：

  1. 创建Gradient对象：根据渐变类型（线性渐变或径向渐变），使用LinearGradient或RadialGradient构造函数创建渐变对象。

  2. 设置渐变颜色和位置：通过addColorStop方法设置渐变中各个颜色停止点的位置和颜色。

  3. 应用渐变：将创建的Gradient对象设置到DrawingRenderingContext的填充样式（fillStyle）或描边样式（strokeStyle）中。

  4. 绘制图形：使用fillRect、strokeRect或其他绘制方法，将渐变应用到图形上。

示例代码（简化）：

let ctx = canvas.getContext('2d');
let gradient = new LinearGradient(0, 0, 100, 100);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 100, 100);

上述代码创建了一个从红色到蓝色的线性渐变，并将其应用于一个矩形。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部