网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
.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(创建矩形路径)等接口绘制基础形状
@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.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(绘制描边类文本)等接口进行文本绘制。
@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.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:渐变的结束圆的半径
@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(() =>{
//创建一个径向渐变色的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%’)
}
}
5.场景示例
🦋5.1 规则基础形状绘制
@Entry
@Component
struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(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.fillStyle = ‘#0097D4’;
// 以(50, 50)为左上顶点,画一个宽高200的矩形
this.context.fillRect(50,50,200,200);
// 以(70, 70)为左上顶点,清除宽150高100的区域
this.context.clearRect(70,70,150,100);
})
}
.width(‘100%’)
.height(‘100%’)
}
}
🦋5.2 不规则图形绘制
@Entry
@Component
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
.2 不规则图形绘制
@Entry
@Component
[外链图片转存中…(img-jUydgfDe-1715624383440)]
[外链图片转存中…(img-7OLT67uv-1715624383440)]
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!