本篇文章，主要是使用Canvas绘制一个简单的画板，可以更改颜色，画笔粗细以及删除操作，主要运用到了CanvasRenderingContext2D中的绘制路径

功能，我们可以看下基本实现的效果。

若在一个画板上进行随意的绘制，少不了画布的存在，鸿蒙当中为我们提供了Canvas组件，使用它，我们可以在上面进行绘制各种想要的图形，共有

两个构造参数，可以只接收一个context参数，主要用于设置绘制的能力，除了context参数，也可以接收一个ImageAIOptions参数，主要用于需要AI

分析选项的时候，一般传递一个参数就可以。

(context?: CanvasRenderingContext2D | DrawingRenderingContext): CanvasAttribute

CanvasRenderingContext2D比DrawingRenderingContext功能设置更加丰富，而且兼容其自身所带的功能，所以，在绘制元素上，还是建议使用

CanvasRenderingContext2D。

设置画布

Canvas是一个组件，我们之间可以像其他组件一样进行使用。

Canvas(this.context)        .width('100%')        .height('100%')

传递的是一个CanvasRenderingContext2D对象。

private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

RenderingContextSettings是用来配置CanvasRenderingContext2D对象的参数，可以设置是否开启抗锯齿。

路径绘制

路径绘制，包括了手指按下的开始路径，移动路径到指定点，以及手指移动时的点到指定点的路径连接，还有最后的路径结束，这样的流程，才能让线条绘制的更加丝滑，更加符合正常的使用。

.onTouch((event: TouchEvent) => {          switch (event.type) {            case TouchType.Down://              let downTouch = event.touches[0]              this.context.beginPath()              this.context.moveTo(downTouch.x, downTouch.y)              break            case TouchType.Move:              let touch = event.touches[0]              this.context.lineTo(touch.x, touch.y)              this.context.stroke()              break            case TouchType.Up:              this.context.closePath()              break          }        })

设置抗锯齿

通过设置抗锯齿，可以去掉线条的毛边，让线条变得丝滑顺畅。

Canvas(this.context)        .width('100%')        .height('100%')        .onReady(() => {          this.settings.antialias = true//打开抗锯齿          this.context.lineCap = "round"//设置指定线端点的样式，圆形        })

清除操作

this.context.clearRect(0, 0, this.context.width, this.context.height)

完整代码

@Entry@Componentstruct Index {  private settings: RenderingContextSettings = new RenderingContextSettings(true)  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)  private mColors: string[] =    ["#000000", "#ffffff", "#FF050C", "#FF7F1D", "#FFE613", "#B2FF29", "#31FFCA", "#2253FF", "#DA25FF", "#FFA687",      "#ACFFD3", "#98C8FF",      "#B8ACFF", "#FFCFC5", "#FFDF91"]  @State showListColor: boolean = true  @State sliderProgress: string = ""  build() {    Column() {      Canvas(this.context)        .width('100%')        .height('100%')        .onReady(() => {          this.settings.antialias = true          this.context.lineCap = "round"        })        .onTouch((event: TouchEvent) => {          switch (event.type) {            case TouchType.Down:              let downTouch = event.touches[0]              this.context.beginPath()              this.context.moveTo(downTouch.x, downTouch.y)              break            case TouchType.Move:              let touch = event.touches[0]              this.context.lineTo(touch.x, touch.y)              this.context.stroke()              break            case TouchType.Up:              this.context.closePath()              break          }        })        .layoutWeight(1)      //颜色      List({ space: 10 }) {        ForEach(this.mColors, (item: string, _: number) => {          ListItem() {            Text()              .width(20)              .height(20)              .backgroundColor(item)              .borderRadius(20)              .border({ width: 1, color: "#e8e8e8" })              .onClick(() => {                this.context.strokeStyle = item              })          }        })      }      .width("100%")      .height(40)      .listDirection(Axis.Horizontal)      .scrollBar(BarState.Off)      .alignListItem(ListItemAlign.Center)      .border({ width: { top: 1 }, color: "#e8e8e8" })      .visibility(this.showListColor ? Visibility.Visible : Visibility.Hidden)      Slider({        value: 0,        min: 0,        max: 50,        style: SliderStyle.OutSet      })        .showTips(true, this.sliderProgress)        .trackThickness(5)        .onChange((value: number, _: SliderChangeMode) => {          this.sliderProgress = value.toString()          this.context.lineWidth = value        })      Row() {        Image($r("app.media.canvas_del"))          .width(30)          .height(30)          .borderRadius(30)          .border({ width: 1, color: "#e8e8e8" })          .padding(5)          .onClick(() => {            //橡皮擦            this.context.strokeStyle = "#ffffff"          })        Image($r("app.media.canvas_clear"))          .width(30)          .height(30)          .borderRadius(30)          .border({ width: 1, color: "#e8e8e8" })          .margin({ left: 20 })          .padding(5)          .onClick(() => {            //清空            this.context.clearRect(0, 0, this.context.width, this.context.height)          })      }.width("100%")      .height(50)      .border({ width: { top: 1 }, color: "#e8e8e8" })      .justifyContent(FlexAlign.Center)    }  }}

相关总结

画板，最重要的就是绘制，保证线条绘制的连续性，这一点很重要，还有就是beginPath方法一定要调用，否则更改颜色以及绘制就会出现不连续以

及颜色设置错误问题。