鴻蒙元服務(wù)實戰(zhàn)-笑笑五子棋（2）

章節(jié)導(dǎo)讀

本章節(jié)主要講解如何創(chuàng)建元服務(wù)和使用 canvas 描繪圖形

目標(biāo)

上一章最后講到了 笑笑五子棋 主要的技術(shù)棧如下：

1. ArkTS API 12
2. Canvas
3. 元服務(wù)獨有的 AtomicServiceTabs
4. 卡片開發(fā)
5. 元服務(wù)的創(chuàng)建
6. 元服務(wù)的上架

那么本章節(jié)就開始實現(xiàn)這個案例。

AGC 平臺上創(chuàng)建元服務(wù)

需要先在AGC平臺上項目，然后再新建元服務(wù)。一個項目可以對應(yīng)多個元服務(wù)。

DevEco Studio 創(chuàng)建元服務(wù)工程

AGC 平臺上創(chuàng)建好了項目，我們可以在本地創(chuàng)建元服務(wù)。

1. 新建元服務(wù)

2. 選擇 笑笑五子棋

3. 選擇工程位置

4. 元服務(wù)創(chuàng)建成功
   

Canvas 入門

Canvas提供畫布組件，用于自定義繪制圖形，開發(fā)者使用 CanvasRenderingContext2D 對象和 OffscreenCanvasRenderingContext2D

對象在 Canvas 組件上進行繪制，繪制對象可以是基礎(chǔ)形狀、文本、圖片等。

基本使用

canvas 的基本使用分為 4 步：

1. 設(shè)置是否抗鋸齒抗鋸齒（Anti - aliasing）是一種在數(shù)字圖形處理中使用的技術(shù)，主要用于減少圖像中因為像素有限而產(chǎn)生的鋸齒狀邊緣的現(xiàn)象
2. 創(chuàng)建畫布上下文
3. 渲染畫布組件
4. 在畫布上描繪圖案

@Entry
@Component
struct Index {
  // 1 用來配置CanvasRenderingContext2D對象的參數(shù)，包括是否開啟抗鋸齒，true表明開啟抗鋸齒。
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  // 2 用來創(chuàng)建CanvasRenderingContext2D對象，通過在canvas中調(diào)用CanvasRenderingContext2D對象來繪制。
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
      // 3 在canvas中調(diào)用CanvasRenderingContext2D對象。
    Column(){
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() = > {
          // 4 可以在這里繪制內(nèi)容。
          this.context.strokeRect(50, 50, 200, 150);
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

5. 效果

canvas 常見用法

canvas 的核心思想是將想要的圖形如，直線、圓圈、矩形等圖形描繪到畫布上。如果想要呈現(xiàn)出比較酷炫的效果，做法是：

1. 描繪圖形
2. 擦除畫布
3. 計算數(shù)值-重新描繪圖形
4. 擦除畫布
5. 。。。

通過以上過程實現(xiàn)動畫效果

canvas 的坐標(biāo)系

在 canvas 中畫圖形都是基于坐標(biāo)系來進行的。 左上角為起點。

描繪圖形

canvas 中內(nèi)置的常見的描繪圖形的方法有以下：

1. 直線
2. 矩形
3. 弧形
4. 文本
5. 圖像
6. ...

直線

描繪直線可以使用：

1. 定起點 moveTo
2. 定終點 lineTo
3. 開始描繪 stroke

this.context.moveTo(10, 10);
this.context.lineTo(100, 100);
this.context.stroke();

矩形

可以使用直線lineTo自己畫成一個矩形。也可以直接使用 strokeRect直接生成矩形

lineTo 畫矩形

this.context.moveTo(10, 10);
this.context.lineTo(300, 10);
this.context.lineTo(300, 300);
this.context.lineTo(10, 300);
//   自動閉環(huán)
this.context.closePath();
//   開始描述 將路徑的當(dāng)前點移回到路徑的起點，當(dāng)前點到起點間畫一條直線
this.context.stroke();

strokeRect 畫矩形

// this.context.strokeRect(x, y, 寬度, 高度);
this.context.strokeRect(50, 50, 200, 150);

弧形

弧形可以使用 arc 和 arcTo 來描繪

arc

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean)

這里需要注意的是 arc 使用的單位是弧度不是角度

一圈 = 360角度 =  2 * Math.PI
半圈 = 180角度 =  Math.PI ≈ 3.14

觀察以下效果

100,75 是圓心坐標(biāo)

50 是半徑

0 是開始的弧度

6.28 ≈ 2 * Math.PI = 一圈

arc 是從正右方向開始旋轉(zhuǎn)的。

this.context.beginPath();
this.context.arc(100, 75, 50, 0, 3.14 / 2);
this.context.stroke();

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number)

this.context.beginPath();
this.context.strokeStyle = "#000000";
this.context.lineWidth = 3;
this.context.moveTo(360, 20);
this.context.arcTo(360, 170, 110, 170, 150);
this.context.stroke();

輔助理解

想象一下，我們有一個起點（即當(dāng)前路徑的最后一個點），然后有三個更多的點：兩個控制點 (x1, y1) 和 (x2, y2)，以及由 radius

定義的一個圓心。arcTo 會創(chuàng)建一條從起點到第二個控制點 (x2, y2) 的圓弧，這條圓弧是位于以 radius 為半徑的圓周上的一部

分。該圓弧會在起點和第一個控制點 (x1, y1) 之間形成一個切線，并且也會在第二個控制點 (x2, y2) 和圓弧的終點之間形成一個切線。

文本

1. strokeText表示描邊的圖形
2. fillText 表示填充的圖形，還有其他 fill ，fillRect等也表示填充。

strokeText

this.context.font = '55px sans-serif'
  this.context.strokeText("Hello World!", 20, 60)

fillText

this.context.font = '55px sans-serif'
this.context.fillText("Hello World!", 20, 60)

圖像

drawImage可以把圖像描繪到畫布上，很多的在線圖形合成效果都可以利用該功能實現(xiàn)

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void

drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img: ImageBitmap = new ImageBitmap("/images/example.jpg")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() = > {
          this.context.drawImage(this.img, 0, 0)
          this.context.drawImage(this.img, 0, 150, 300, 100)
          this.context.drawImage(this.img, 0, 0, 500, 500, 0, 300, 400, 200)
        })
    }
    .width('100%')
    .height('100%')
  }
}

canvas 淺嘗動態(tài)效果 1

const width = px2vp(display.getDefaultDisplaySync().availableWidth) * 0.9;
const height = width;
let x = 0;
let y = 0;
setInterval(() = > {
  this.context.strokeRect(x, y, 100, 100);
  x++;
  y++;
}, 20);

canvas 淺嘗動態(tài)效果 2

const width = px2vp(display.getDefaultDisplaySync().availableWidth) * 0.9;
const height = width;
let x = 0;
let y = 0;
setInterval(() = > {
  // 清理畫布
  this.context.strokeRect(x, y, 100, 100);
  x++;
  y++;
}, 20);

canvas 屬性 一覽

canvas 方法 一覽

總結(jié)

這篇文章主要是介紹了元服務(wù)的創(chuàng)建和基本 canvas 的使用

如果你興趣想要了解更多的鴻蒙應(yīng)用開發(fā)細(xì)節(jié)和最新資訊，歡迎在評論區(qū)留言或者私信或者看我個人信息，可以加入技術(shù)交流群。

審核編輯 黃宇