華為大佬解析開源鴻蒙 OpenHarmony 3.1 關(guān)鍵特性畫布，教你如何完成飛機(jī)大戰(zhàn)小游戲

IT之家 2 月 10 日消息，華為技術(shù)有限公司的江英杰為大家揭曉了關(guān)于開源鴻蒙 OpenHarmony 3.1 Beta 版中的一個關(guān)鍵特性，也就是 ArkUI 開發(fā)框架中的 canvas 畫布。

據(jù)介紹，canvas 是 ArkUI 開發(fā)框架里的畫布組件，常用于自定義繪制圖形。因為其輕量、靈活、高效等優(yōu)點，被廣泛應(yīng)用于 UI 界面開發(fā)中。本期，我們將為大家介紹 ArkUI 開發(fā)框架中 canvas 組件的使用。

canvas 介紹

1.1 什么是 canvas？

IT之家了解到，在 Web 瀏覽器中，canvas 是一個可自定義 width、height 的矩形畫布，畫布左上角為坐標(biāo)原點，以像素為單位，水平向右為 x 軸，垂直向下為 y 軸，畫布內(nèi)所有元素都基于原點進(jìn)行定位。

如下圖所示，我們可以通過 <canvas> 標(biāo)簽，創(chuàng)建了一個 width= 1500px，height=900px 的空白畫布，我們還需要“畫筆”才能繪制圖形。canvas 采用輕量的逐像素渲染機(jī)制，以 JS 為“畫筆”直接控制畫布像素，從而實現(xiàn)圖形繪制。

1.2 Canvas 的“畫筆”

canvas 本身雖不具備繪制能力，但是提供了獲取“畫筆”的方法。開發(fā)者可通過 getContext ('2d') 方法獲取 CanvasRenderingContext2D 對象完成 2D 圖像繪制，或通過 getContext ('webgl') 方法獲取 WebGLRenderingContext 對象完成 3D 圖像繪制。

目前，ArkUI 開發(fā)框架中的 WebGL1.0 及 WebGL2.0 標(biāo)準(zhǔn) 3D 圖形繪制能力正在完善中，所以本文將著重介紹 2D 圖像的繪制。如下圖所示，是 CanvasRenderingContext2D 對象提供的部分 2D 圖像繪制方法，豐富的繪制方法讓開發(fā)者能高效地繪制出矩形、文本、圖片等。

除此之外，開發(fā)者還可以通過獲取 OffscreenCanvasRenderingContext2D 對象進(jìn)行離屏繪制，繪制方法同上。當(dāng)繪制的圖形比較復(fù)雜時，頻繁地刪除與重繪會消耗很多性能。

這時，開發(fā)者可以根據(jù)自身的需求靈活選取離屏渲染的方式，首先通過創(chuàng)建 OffscreenCanvas 對象作為一個緩沖區(qū)，然后將內(nèi)容繪制在 OffscreenCanvas 上，最后再將 OffscreenCanvas 繪制到主畫布上，以提高畫布性能，確保繪圖的質(zhì)量。

canvas 基礎(chǔ)繪制方法

通過上節(jié)對 canvas 組件的基本介紹，相信大家對 canvas 組件已經(jīng)有了一定的認(rèn)識，下面我們將為大家實際演示 canvas 組件在 ArkUI 開發(fā)框架中的使用方法。ArkUI 開發(fā)框架參考了 Web 瀏覽器中 canvas 的設(shè)計，并在“類 Web 開發(fā)范式”及“聲明式開發(fā)范式”兩種開發(fā)范式中進(jìn)行提供，接下來我們將分別介紹這兩種開發(fā)范式中 canvas 的繪制方法。

2.1 類 Web 開發(fā)范式中 canvas 的繪制方法

類 Web 開發(fā)范式，使用 HML 標(biāo)簽文件進(jìn)行布局搭建、CSS 文件進(jìn)行樣式描述，并通過 JS 語言進(jìn)行邏輯處理。目前，JS 語言的 canvas 繪圖功能已經(jīng)基本上完善，下面我們將通過兩個示例，展示基于 JS 語言的 canvas 組件基礎(chǔ)使用方法。

2.1.1 矩形填充

CanvasRenderingContext2D 對象提供了 fillRect (x, y, width, height) 方法，用于繪制一個填充的矩形。如下圖所示，在畫布內(nèi)繪制了一個黑色的填充矩形，x 與 y 指定了在 canvas 畫布上所繪制的矩形的左上角（相對于原點）的坐標(biāo)，width 和 height 則設(shè)置了矩形的尺寸。

示例代碼如下：

//創(chuàng)建一個width=1500px，height=900px的畫布<!-- xxx.hml --><div>  <canvas ref="canvas" style="width: 1500px; height: 900px; "></canvas></div>

//xxx.jsexport default {  onShow() {    const el =this.$refs.canvas;//獲取2D繪制對象    const ctx = el.getContext('2d');//設(shè)置填充為黑色    ctx.fillStyle = '#000000';//設(shè)置填充矩形的坐標(biāo)及尺寸    ctx.fillRect(200, 200, 300, 300);  }}

2.1.2 縮放與陰影

CanvasRenderingContext2D 對象提供了 scale (x,y) 方法，參數(shù) x 表示橫軸方向上縮放倍數(shù)，y 表示縱軸方向上縮放的倍數(shù)，值得注意的是縮放過程中定位也會被縮放。如下圖所示，是將上個示例中的填充矩形通過  scale (2,1.5) 縮放，并通過 shadowBlur 方法加上陰影后的效果。

示例代碼如下：

//xxx.jsexport default {  onShow() {    const el =this.$refs.canvas;    const ctx = el.getContext('2d');//設(shè)置繪制陰影的模糊級別    ctx.shadowBlur = 80;    ctx.shadowColor = 'rgb(0,0,0)';    ctx.fillStyle = 'rgb(0,0,0)';    // x Scale to 200%,y Scale to 150%    ctx.scale(2, 1.5);    ctx.fillRect(200, 200, 300, 300);  }}

2.2 聲明式開發(fā)范式中 canvas 的繪制方法

聲明式開發(fā)范式，采用 TS 語言并進(jìn)行聲明式 UI 語法擴(kuò)展，從組件、動效和狀態(tài)管理三個維度提供了 UI 繪制能力，目前已經(jīng)提供了 canvas 組件繪制能力，但功能仍在完善中。下面我們將通過兩個示例展示聲明式開發(fā)范式中 canvas 組件的基礎(chǔ)使用方法。

2.2.1 圖片疊加

如下圖所示，是三張圖片疊加的效果，頂層的圖片覆蓋了底層的圖片。通過依次使用 drawImage (x,y, width, height) 方法設(shè)置圖片坐標(biāo)及尺寸，后面繪制的圖片自動覆蓋原來的圖像，從而達(dá)到預(yù)期效果。

擴(kuò)展的 TS 語言采用更接近自然語義的編程方式，讓開發(fā)者可以直觀地描述 UI 界面，示例代碼如下：

@Entry@Componentstruct IndexCanvas1 {  private settings:RenderingContextSettings = new RenderingContextSettings(true);//獲取繪圖對象  private ctx: RenderingContext = new RenderingContext(this.settings);//列出所要用到的圖片  private img:ImageBitmap = new ImageBitmap("common/bg.jpg");  build() {    Column() {      //創(chuàng)建canvas      Canvas(this.ctx)        .width(1500)        .height(900)        .border({color:"blue",width:1,})        .backgroundColor('#ffff00')         //開始繪制        .onReady(() => {          this.ctx.drawImage( this.img,400,200,540,300);          this.ctx.drawImage( this.img,500,300,540,300);          this.ctx.drawImage( this.img,600,400,540,300);        })    }    .width('100%')    .height('100%')  }}

2.2.2 點擊創(chuàng)建線性漸變

如下圖所示，是一個線性漸變效果。基于 canvas 擴(kuò)展了一個 Button 組件，通過點擊“Click”按鈕，觸發(fā) onClick () 方法，并通過調(diào)用 createLinearGradient () 方法，繪制出了一個線性漸變色。

示例代碼如下：

@Entry@Componentstruct GradientExample {  private settings: RenderingContextSettings = new RenderingContextSettings(true);  private context: RenderingContext = new RenderingContext(this.settings);  private gra: CanvasGradient = new CanvasGradient();  build() {    Column({ space: 5 })  {//創(chuàng)建一個畫布      Canvas(this.context)        .width(1500)        .height(900)        .backgroundColor('#ffff00 ')      Column() {//設(shè)置按鈕的樣式        Button('Click').width(250).height(100).backgroundColor('#000000')          .onClick(() => {//創(chuàng)建一個線性漸變色            var grad = this.context.createLinearGradient(600, 200, 400, 750)            grad.addColorStop(0.0, 'red');            grad.addColorStop(0.5, 'white');            grad.addColorStop(1.0, 'green');            this.context.fillStyle = grad;            this.context.fillRect(400, 200, 550, 550);          })       }.alignItems(HorizontalAlign.center)     }   } }

飛機(jī)大戰(zhàn)小游戲繪制實踐

如下圖所示，是一款”飛機(jī)大戰(zhàn)”小游戲，通過控制戰(zhàn)機(jī)的移動摧毀敵機(jī)。如何使用 ArkUI 開發(fā)框架提供的 canvas 組件輕松實現(xiàn)這個經(jīng)典懷舊的小游戲？實現(xiàn)思路及關(guān)鍵代碼如下：

1. 首先列出游戲所用到的圖片

private imgList:Array<string> = ["xx.png","xx.png"…];

2. 將圖片渲染到 canvas 畫布上

let img:ImageBitmap = new ImageBitmap("圖片路徑（如common/images）/"+this.imgList[數(shù)組下標(biāo)]);this.ctx.drawImage( img,150/* x坐標(biāo)*/,  150/* y坐標(biāo)*/, 600/*寬*/, 600/*高*/)

3. 繪制背景圖片和戰(zhàn)機(jī)向下移動的效果

this.ctx.drawImage(this.bg, 0, this.bgY);this.ctx.drawImage(this.bg, 0, this.bgY - 480);this.bgY++ == 480 && (this.bgY = 0);

4. 使用 Math.round 函數(shù)隨機(jī)獲取敵機(jī)圖片并渲染到畫布上，并且改變敵機(jī) y 軸坐標(biāo)，使它向下運動。

Efight = Math.round(Math.random()*7);//前七張為敵機(jī)圖片。let img:ImageBitmap = new ImageBitmap("common/img"+this.imgList[Efight]);this.ctx.drawImage(img, 0, this.Eheight + 50);//渲染敵機(jī)

5. 在頁面每隔 120ms 出現(xiàn)一排子彈，之后減小或增大（x,y）軸的坐標(biāo)達(dá)到子彈射出效果。

let i= 0;setInterval(()=>{  this.ctx.drawImage(this.bulImg1,image.x – 10 – (i *10) , image.x + (i *10))  this.ctx.drawImage(this.bulimg2, this. bulImg1,image.x – (i *10) , i image.x + (i *10))  this.ctx.drawImage(this.bulimg3, image.x + 10 + (i *10), image.x + (i *10))i ++;},120)

6. 使用 onTouch 方法獲取戰(zhàn)機(jī)移動位置，獲取拖動的坐標(biāo)后重新設(shè)置戰(zhàn)機(jī)的圖片坐標(biāo)，使戰(zhàn)機(jī)實現(xiàn)拖動效果。

.onTouch((event)=>{  var offsetX = event.localX ||event.touches[0].localX;  var offsetY = event.localY ||event.touches[0].localY;  var w = this.heroImg[0].width,      h = this.heroImg[0].height;  var nx = offsetX - w / 2,      ny = offsetY - h / 2;      nx < 20 - w / 2 ? nx = 20 - w / 2 : nx > (this.windowWidth - w / 2 - 20) ? nx =  (this.windowWidth - w / 2 - 20) : 0;  ny < 0 ? ny = 0 : ny > (this.windowHeight - h / 2) ? ny = (this.windowHeight –  h/2) : 0;     this.hero.x = nx;     this.hero.y = ny;     this.hero.count = 2;

注：本示例引用了部分開源資源，感興趣的開發(fā)者可參考此開源資源，結(jié)合文中的實現(xiàn)思路補(bǔ)全代碼。（https://github.com/ xs528 / game）

以上就是本期全部內(nèi)容，期待廣大開發(fā)者能通過 canvas 組件繪制出精美的圖形，更多 canvas 組件的詳細(xì)使用方法，請參考文檔進(jìn)行學(xué)習(xí)：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-canvas-canvas-0000000000621808

廣告聲明：文內(nèi)含有的對外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。