HarmonyOS鸿蒙Next中CanvasRenderingContext2D使用canvas画布实现水印

HarmonyOS鸿蒙Next中CanvasRenderingContext2D使用canvas画布实现水印 使用canvas画布实现水印,canvas画布宽高能动态设置吗？目前只看到canvas的宽高是只读属性，请问如何修改 想实现一个页面容器的水印效果，目前的思路是canvas的宽高设置成屏幕对角线的长度，然后进行旋转，达到满屏的效果，目前发现canvas无法动态设置宽高

3 回复

参考：

@Entry
@Component
struct CanvasDemo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
@State @Watch('draw')content: string = ""
@State w:string="100%"
@State h:string="50%"

draw() {
this.context.clearRect(0, 0, 200, 200) // 清理画布内容
this.context.fillText(this.content, 50, 50) // 重新填充
}
aboutToAppear(): void {
this.w="50%"
}

build() {
Column() {
Canvas(this.context)
.width(this.w)
.height(this.h)
.backgroundColor('#F5DC62')
.onReady(() => {
//可以在这里绘制内容。
this.context.font = '55px sans-serif'
this.context.fillText(this.content, 50, 50)
})
TextInput({
text:$$this.content
})
}
.borderColor('#31525B')
.borderWidth(12)
.width('100%')
.height('100%')
}

更多关于HarmonyOS鸿蒙Next中CanvasRenderingContext2D使用canvas画布实现水印的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，CanvasRenderingContext2D 是用于在画布上进行2D图形绘制的API。通过在Canvas画布上使用CanvasRenderingContext2D，可以实现水印效果。具体步骤如下：

  1. 创建Canvas元素：首先需要在UI布局中创建一个Canvas元素，可以通过XML或代码方式定义。

  2. 获取CanvasRenderingContext2D对象：通过Canvas元素的getContext('2d')方法获取CanvasRenderingContext2D对象，该对象提供了绘制2D图形的方法。

  3. 绘制水印文本：使用CanvasRenderingContext2D的fillText()方法绘制水印文本。可以通过设置font属性来调整字体样式，fillStyle属性设置文本颜色，globalAlpha属性设置透明度。

  4. 旋转和定位水印：如果需要旋转水印，可以使用rotate()方法进行旋转，并通过translate()方法调整水印的位置。

  5. 重复绘制：为了实现满屏水印效果，可以使用循环多次调用fillText()方法，结合translate()和rotate()方法调整每个水印的位置和角度。

  6. 更新Canvas：完成绘制后，Canvas会自动更新显示水印效果。

示例代码片段如下：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.globalAlpha = 0.5;
ctx.rotate(-0.785);
for (let i = 0; i < canvas.width; i += 150) {
  for (let j = 0; j < canvas.height; j += 100) {
    ctx.fillText('Watermark', i, j);
  }
}

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现Canvas画布上的水印效果。

在HarmonyOS鸿蒙Next中，使用CanvasRenderingContext2D在画布上实现水印的步骤如下：

  1. 创建Canvas对象：首先，创建一个Canvas对象并获取其2D渲染上下文。
  2. 设置水印样式：通过fillStyle和font属性设置水印的文字颜色和字体样式。
  3. 绘制水印：使用fillText方法在Canvas上绘制水印文字，可以通过调整rotate和translate方法实现水印的旋转和位置调整。
  4. 重复绘制：通过循环或递归方式在画布上重复绘制水印，确保覆盖整个画布。

示例代码：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.font = '20px Arial';
ctx.rotate(-0.785);
for (let i = 0; i < canvas.width; i += 100) {
    for (let j = 0; j < canvas.height; j += 100) {
        ctx.fillText('水印', i, j);
    }
}

通过以上步骤，可以在Canvas上实现自定义的水印效果。

回到顶部