2024年鸿蒙最全鸿蒙HarmonyOS实战-ArkUI组件（Canvas）_鸿蒙 canvas(4)，2024年最新HarmonyOS鸿蒙面试题库-CSDN博客

本文链接：https://blog.csdn.net/2401_84853495/article/details/138638079

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

.backgroundColor(‘#F5DC62’)
.onReady(() => {
this.context.fillStyle = ‘#0097D4’;
this.context.fillRect(50, 50, 100, 100);
})
}
.width(‘100%’)
.height(‘100%’)
}
}

在这里插入图片描述

3.画布组件绘制方式

Canvas类支持使用Path2D对象来绘制复杂的路径图形。

Path2D是一个可重用的路径对象，用于描述二维空间中的路径。开发者可以使用Path2D对象来定义路径的轮廓，并在Canvas上绘制出来。

@Entry
@Component
struct CanvasExample2 {
//用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
//用来创建OffscreenCanvasRenderingContext2D对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width(‘100%’)
.height(‘100%’)
.backgroundColor(‘#F5DC62’)
.onReady(() =>{
this.context.beginPath();
this.context.moveTo(50, 50);
this.context.lineTo(280, 160);
this.context.stroke();
})
Canvas(this.context)
.width(‘100%’)
.height(‘100%’)
.backgroundColor(‘#F5DC62’)
.onReady(() =>{
let region = new Path2D();
region.arc(100, 75, 50, 0, 6.28);
this.context.stroke(region);
})
}
.width(‘100%’)
.height(‘100%’)
}
}

在这里插入图片描述

4.画布组件常用方法

方法/属性	说明
fill()	对封闭路径进行填充
clip()	设置当前路径为剪切路径
stroke()	进行边框绘制操作
fillStyle	指定绘制的填充色
globalAlpha	设置透明度
strokeStyle	设置描边的颜色
Font	设置字体样式
textAlign	设置文本对齐方式
textBaseline	设置基线对齐方式
measureText()	测量文本的宽度
drawImage()	绘制图片
createImageData()	创建一个新的、空白的ImageData对象
getImageData()	获取指定区域的图像数据
putImageData()	将像素数据放回画布上的指定位置
createLinearGradient()	创建线性渐变
createRadialGradient()	创建径向渐变
createPattern()	创建图案
drawFocusIfNeeded()	如果元素具有焦点，则绘制它
addHitRegion()	添加点击区域
removeHitRegion()	移除点击区域
isPointInPath()	判断指定点是否在路径中
clearRect()	清除指定矩形区域
save()	保存当前绘图状态
restore()	恢复上一个保存的绘图状态
scale()	缩放当前绘图
rotate()	旋转当前绘图
translate()	平移当前绘图
transform()	通过矩阵变换，应用缩放、旋转、平移、扭曲等变换
setTransform()	通过矩阵变换，应用缩放、旋转、平移等变换
createOffscreenCanvas()	创建离屏画布
getContext()	获取绘图上下文对象
draw()	将离屏画布上的绘制内容绘制到主画布上
clear()	清除离屏画布
closePath()	关闭当前路径
moveTo()	将绘图游标移动到指定的坐标位置
lineTo()	添加一条直线连接到指定的坐标点
arc()	以给定的中心点和半径，绘制弧形路径
quadraticCurveTo()	添加二次贝塞尔曲线连接到指定的坐标点
bezierCurveTo()	添加三次贝塞尔曲线连接到指定的坐标点
arcTo()	通过给定的控制点和半径，绘制连接两个切线的圆弧路径
rect()	绘制一个矩形路径
isPointInStroke()	判断指定点是否在路径的描边上
strokeRect()	绘制一个矩形路径的边框
fillRect()	绘制一个填充的矩形路径
beginPath()	开始一个新的路径
drawTextOnPath()	沿着路径绘制文本
drawVisible()	绘制离屏画布的可见区域到主画布上
toDataURL()	将画布内容转为数据URL格式
getTransform()	获取当前绘图的变换矩阵
setLineDash()	设置虚线样式
getLineDash()	获取虚线样式
resetTransform()	重置当前绘图的变换矩阵
drawCustomEffect()	绘制自定义特效
drawShadow()	绘制阴影

🦋4.1 基础形状绘制

可以通过arc（绘制弧线路径）、 ellipse（绘制一个椭圆）、rect（创建矩形路径）等接口绘制基础形状

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width(‘100%’)
.height(‘100%’)
.backgroundColor(‘#F5DC62’)
.onReady(() =>{
//绘制矩形
this.context.beginPath();
this.context.rect(100, 50, 100, 100);
this.context.stroke();
//绘制圆形
this.context.beginPath();
this.context.arc(150, 250, 50, 0, 6.28);
this.context.stroke();
//绘制椭圆
this.context.beginPath();
this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2);
this.context.stroke();
})
}
.width(‘100%’)
.height(‘100%’)
}
}

在这里插入图片描述

🦋4.2 文本绘制

可以通过fillText（绘制填充类文本）、strokeText（绘制描边类文本）等接口进行文本绘制。

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width(‘100%’)
.height(‘100%’)
.backgroundColor(‘#F5DC62’)
.onReady(() =>{
//绘制填充类文本
this.context.font = ‘50px sans-serif’;
this.context.fillText(“Hello World!”, 50, 100);
//绘制描边类文本
this.context.font = ‘55px sans-serif’;
this.context.strokeText(“Hello World!”, 50, 150);
})
}
.width(‘100%’)
.height(‘100%’)
}
}

在这里插入图片描述

🦋4.3 绘制图片和图像像素信息处理

接口	描述
drawImage	用于绘制图像
putImageData	使用ImageData数据填充新的矩形区域
createImageData	创建新的ImageData对象
getPixelMap	以当前canvas指定区域内的像素创建PixelMap对象
getImageData	以当前canvas指定区域内的像素创建ImageData对象

@Entry
@Component
struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
private img:ImageBitmap = new ImageBitmap(“1702344909275.jpg”)

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width(‘100%’)
.height(‘100%’)
.backgroundColor(‘#F5DC62’)
.onReady(() =>{
// 使用drawImage接口将图片画在（0，0）为起点，宽高130的区域
this.offContext.drawImage(this.img,0,0,130,130);
// 使用getImageData接口，获得canvas组件区域中，（50，50）为起点，宽高130范围内的绘制内容
let imagedata = this.offContext.getImageData(50,50,130,130);
// 使用putImageData接口将得到的ImageData画在起点为（150， 150）的区域中
this.offContext.putImageData(imagedata,150,150);
// 将离屏绘制的内容画到canvas组件上
let image = this.offContext.transferToImageBitmap();
this.context.transferFromImageBitmap(image);
})
}
.width(‘100%’)
.height(‘100%’)
}
}

在这里插入图片描述

🦋4.4 其他方法

Canvas中还提供其他类型的方法。渐变（CanvasGradient对象）相关的方法：createLinearGradient（创建一个线性渐变色）、createRadialGradient（创建一个径向渐变色）等。

Canvas的createRadialGradient方法用于创建一个径向渐变色。

语法：

createRadialGradient(x0, y0, r0, x1, y1, r1)

参数说明：

x0：渐变的起始圆的x坐标
y0：渐变的起始圆的y坐标
r0：渐变的起始圆的半径
x1：渐变的结束圆的x坐标
y1：渐变的结束圆的y坐标
r1：渐变的结束圆的半径

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width(‘100%’)
.height(‘100%’)
.backgroundColor(‘#F5DC62’)
.onReady(() =>{
//创建一个径向渐变色的CanvasGradient对象
let grad = this.context.createRadialGradient(200,200,50, 200,200,200)
//为CanvasGradient对象设置渐变断点值，包括偏移和颜色
grad.addColorStop(0.0, ‘#E87361’);
grad.addColorStop(0.5, ‘#FFFFF0’);
grad.addColorStop(1.0, ‘#BDDB69’);
//用CanvasGradient对象填充矩形
this.context.fillStyle = grad;
this.context.fillRect(0, 0, 400, 400);
})
}
.width(‘100%’)
.height(‘100%’)
}
}