鸿蒙画布组件使用介绍

一、前言

DevEco Studio版本：4.0.0.600

前些天写了一篇鸿蒙自定义控件实现罗盘数字时钟效果的文章，有同学私信说能不能介绍鸿蒙中的画布组件，下面文章介绍下鸿蒙中的Canvas画布、CanvasRenderingContext2D绘制组件，实现绘制文本、矩形、线条、圆形、椭圆、三角形、扇形、图片等。

Canvas：提供画布组件，用于自定义绘制图形。

CanvasRenderingContext2D：使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等，相当于画笔

RenderingContextSettings：用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿

参考链接：OpenHarmony CanvasRenderingContext2D

二、实现效果

三、具体实现逻辑

1、初始化

private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img: ImageBitmap = new ImageBitmap("images/startIcon.png")build() {Stack({ alignContent: Alignment.Center }) {Canvas(this.context).padding({ top: 76 }).width('100%').height('100%').onReady(() => {this.drawCanvas()})}.width('100%').height('100%')
}//画布逻辑
private drawCanvas(): void {this.context.fillStyle = '#0080DC' //画笔填充颜色this.context.strokeStyle = '#0080DC' //画笔线条颜色this.context.font = '22px' //字体大小
}

2、画文字

//画文字
this.context.fillText("Hello World!", 10, 10)

3、画矩形

//画矩形
this.context.strokeRect(10, 30, 100, 100)

4、画线条

//画线
this.context.beginPath()
this.context.moveTo(10, 150)
this.context.lineTo(180, 200)
this.context.stroke()

5、画圆形

//画圆形
this.context.beginPath()
this.context.arc(60, 250, 50, 0, 2 * Math.PI)
this.context.stroke()

6、画椭圆形

//画椭圆形
this.context.beginPath()
this.context.ellipse(100, 360, 50, 100, Math.PI * 0.5, 0, Math.PI * 2)
this.context.stroke()

7、画三角形

先画两条线，然后通过closePath()方法实现闭环，依次达到画三角形效果

//画三角形
this.context.beginPath()
this.context.moveTo(10, 500)
this.context.lineTo(60, 420)
this.context.lineTo(120, 500)
this.context.closePath()
this.context.stroke()

8、画扇形

先画弧线，在画两条基于弧线起点和终点的线，依次来达到画扇形的效果

//画扇形
this.context.beginPath()
this.context.arc(110, 620, 100, Math.PI, 1.75 * Math.PI)
this.context.moveTo(10, 620)
this.context.lineTo(110, 620)
this.context.lineTo(180.71, 549.29)
this.context.stroke()

9、画图片

//画图片
this.context.drawImage(this.img, 0, 0, 144, 144, 150, 0, 144, 144)

10、画二阶贝赛尔曲线的路径

原理演示动画：

效果：

代码实现：

import display from '@ohos.display'@Entry
@Component
struct Index {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private mDisplayWidth: numberprivate mDisplayHeight: numberaboutToAppear() {this.getSize()}// 获取设备宽高计算表盘大小async getSize() {let mDisplay = await display.getDefaultDisplay()this.mDisplayWidth = mDisplay.widththis.mDisplayHeight = mDisplay.height}build() {Stack({ alignContent: Alignment.Center }) {Canvas(this.context).padding({ top: 76 }).width('100%').height('100%').onReady(() => {this.drawCanvas()}).onTouch((event) => this.touchEvent(event))}.width('100%').height('100%')}private drawCanvas(): void {this.context.clearRect(0, 0, this.mDisplayWidth, this.mDisplayHeight)this.context.strokeStyle = '#0080DC' //画笔线条颜色this.context.lineWidth = 3this.context.font = '22px' //字体大小//画第一个圆this.context.beginPath()this.context.arc(20, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画第二个圆this.context.beginPath()this.context.arc(305, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画贝塞尔曲线this.context.beginPath()this.context.moveTo(20, 195)this.context.quadraticCurveTo(this.eventX, this.eventY, 300, 200)this.context.stroke()}@State eventX: number = 0@State eventY: number = 500touchEvent(event: TouchEvent) {switch (event.type) {case TouchType.Down: // 手指按下case TouchType.Move: // 手指移动this.eventX = event.touches[0].xthis.eventY = event.touches[0].ythis.drawCanvas()break}}
}

11、画三阶贝赛尔曲线的路径

原理演示动画：

效果：

代码实现：

import display from '@ohos.display'@Entry
@Component
struct Index {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private mDisplayWidth: numberprivate mDisplayHeight: number@State isFirst: boolean = trueaboutToAppear() {this.getSize()}// 获取设备宽高计算表盘大小async getSize() {let mDisplay = await display.getDefaultDisplay()this.mDisplayWidth = mDisplay.widththis.mDisplayHeight = mDisplay.height}build() {Stack({ alignContent: Alignment.Center }) {Canvas(this.context).padding({ top: 76 }).width('100%').height('100%').onReady(() => {this.drawCanvas()}).onTouch((event) => this.touchEvent(event))Button(`点击切换，当前${this.isFirst ? '第一点' : '第二点'}`).onClick(() => {this.isFirst = !this.isFirst})}.alignContent(Alignment.TopStart).width('100%').height('100%')}private drawCanvas(): void {this.context.clearRect(0, 0, this.mDisplayWidth, this.mDisplayHeight)this.context.strokeStyle = '#0080DC' //画笔线条颜色this.context.lineWidth = 3this.context.font = '22px' //字体大小//画第一个圆this.context.beginPath()this.context.arc(20, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画第二个圆this.context.beginPath()this.context.arc(405, 200, 5, 0, 2 * Math.PI)this.context.stroke()//画贝塞尔曲线this.context.beginPath()this.context.moveTo(20, 195)this.context.bezierCurveTo(this.eventFirstX, this.eventFirstX, this.eventSecondX, this.eventSecondY, 400, 200)this.context.stroke()this.context.stroke()}@State eventFirstX: number = 120@State eventFirstY: number = 50@State eventSecondX: number = 200@State eventSecondY: number = 500touchEvent(event: TouchEvent) {switch (event.type) {case TouchType.Down: // 手指按下case TouchType.Move: // 手指移动if (this.isFirst) {this.eventFirstX = event.touches[0].xthis.eventFirstY = event.touches[0].y} else {this.eventSecondX = event.touches[0].xthis.eventSecondY = event.touches[0].y}this.drawCanvas()break}}
}