HarmonyOS鸿蒙学习笔记（16）Canvas入门使用

Posted 2023-01-11 郭梧悠

Canvas入门指南

• 1、Canvas代码结构
• 2、简单案例
• • 2.1 fillStyle和fillRect 绘制蓝色矩形
  • 2.2 strokeRect和strokeStyle 绘制红色边框
  • 2.3 lineCap的使用
  • 2.4 lineJoin的使用
  • 2.5 closePath的使用
• 3、参考资料

1、Canvas代码结构

在使用Canvas的时候，需要向初始化RenderingContextSettings 和CanvasRenderingContext2D 两个组件，通过CanvasRenderingContext2D 提供的API来进行绘制。Canvas提供了onReady方法，可以在该方法里完成图形的绘制.

 @Entry
@Component
struct CanvasExample 
  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)//传context给Canvas
        .width('100%')
        .height('100%')
//        .aspectRatio(2.0)
        .backgroundColor('#ffffff')
        .onReady(() =>
        )
    
    .width('100%')
    .height('100%')
  

2、简单案例

2.1 fillStyle和fillRect 绘制蓝色矩形

  //注意context为CanvasRenderingContext2D对象
   this.context.fillStyle = '#0000ff'//填充蓝色
  this.context.fillRect(100,200,100,100)

2.2 strokeRect和strokeStyle 绘制红色边框

  //红色边框
 this.context.strokeStyle = '#ff0000'
  //边框宽度
  this.context.lineWidth = 5
  this.context.strokeRect(100, 400, 100, 100)

2.3 lineCap的使用

指定线端点的样式，可选值为：

• ‘butt’：线端点以方形结束。
• ‘round’：线端点以圆形结束。
• ‘square’：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
  默认值：‘butt’。
  lineCap属性有三个值：round、butt、square，其使用方法如下：

 this.context.strokeStyle = '#00ff00'
  this.context.lineWidth = 10
  this.context.beginPath()
  this.context.lineCap = 'round'
  this.context.moveTo(100, 100)
  this.context.lineTo(200, 100)
  this.context.stroke()

round、butt、square效果如果：从上到下依次是round、butt、square

2.4 lineJoin的使用

指定线段间相交的交点样式，可选值为：

• ‘round’：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
• ‘bevel’：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
• ‘miter’：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
  默认值：‘miter’。

 this.context.strokeStyle = '#ff0000'
  this.context.beginPath()
  this.context.lineWidth = 8
  this.context.lineJoin = 'miter'
  this.context.moveTo(30, 30)
  this.context.lineTo(120, 60)
  this.context.lineTo(30, 110)
  this.context.stroke()

miter,round,bevel效果依次如下：

2.5 closePath的使用

closePath结束当前路径形成一个封闭路径。

  this.context.strokeStyle = '#00ff00'
 //创建一个新的绘制路径。
   this.context.beginPath()
   this.context.lineWidth = 8
   this.context.lineJoin = 'round'
   //路径从当前点移动到指定点。
   this.context.moveTo(130, 30)
   //从当前点到指定点进行路径连接。
   this.context.lineTo(220, 60)
   this.context.lineTo(130, 110)
   //进行边框绘制操作。
   this.context.closePath()
   this.context.stroke()

效果如下：

当然还有其他很丰富的用法，可以参考官方资料

3、参考资料

Canvas官方文档