canvas是ArkUI開(kāi)發(fā)框架里的畫(huà)布組件，常用于自定義繪制圖形。因?yàn)槠漭p量、靈活、高效等優(yōu)點(diǎn)，被廣泛應(yīng)用于UI界面開(kāi)發(fā)中。本期，我們將為大家介紹canvas組件的使用。

一、canvas介紹 1. 什么是canvas？ 在Web瀏覽器中，canvas是一個(gè)可自定義width、height的矩形畫(huà)布，畫(huà)布左上角為坐標(biāo)原點(diǎn)，以像素為單位，水平向右為x軸，垂直向下為y軸，畫(huà)布內(nèi)所有元素的位置基于原點(diǎn)進(jìn)行定位。如圖1所示，我們通過(guò)標(biāo)簽，創(chuàng)建了一個(gè)width=1500px，height=900px的空白畫(huà)布，我們還需要“畫(huà)筆”才能繪制圖形。canvas采用輕量的逐像素渲染機(jī)制，以JS為“畫(huà)筆”直接控制畫(huà)布像素，從而實(shí)現(xiàn)圖形繪制。

圖1 canvas畫(huà)布

2. canvas的“畫(huà)筆”

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

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

圖2圖像繪制方法

另外，開(kāi)發(fā)者還可以獲取OffscreenCanvasRenderingContext2D對(duì)象進(jìn)行離屏繪制，繪制方法同上。當(dāng)繪制的圖形比較復(fù)雜時(shí)，頻繁的刪除與重繪會(huì)消耗很多性能。開(kāi)發(fā)者可根據(jù)自身的需求靈活選取canvas的渲染方式。這時(shí)，開(kāi)發(fā)者可以根據(jù)自身的需求靈活選取離屏渲染的方式，通過(guò)創(chuàng)建OffscreenCanvas對(duì)象作為一個(gè)緩沖區(qū)，然后將需要繪制的內(nèi)容先繪制在OffscreenCanvas上，最后再將OffscreenCanvas繪制到主畫(huà)布上，以提高畫(huà)布性能，確保繪圖的質(zhì)量。

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

1. 類(lèi)Web開(kāi)發(fā)范式中canvas的繪制方法

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

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

圖3填充的矩形

示例代碼如下：

//創(chuàng)建一個(gè)width=1500px，height=900px的畫(huà)布 
  

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

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

圖4縮放與添加陰影后的效果

示例代碼如下：

//xxx.jsexport default {  onShow() {    const el =this.$refs.canvas;    const ctx = el.getContext('2d');   //設(shè)置繪制陰影的模糊級(jí)別    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. 聲明式開(kāi)發(fā)范式中canvas的繪制方法

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

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

圖5圖片疊加

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

@Entry@Componentstruct IndexCanvas1 {  private settings:RenderingContextSettings = new RenderingContextSettings(true);//獲取繪圖對(duì)象  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')         //開(kāi)始繪制        .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）點(diǎn)擊創(chuàng)建線性漸變

如圖6所示，在畫(huà)布中是一個(gè)線性漸變效果。本示例基于canvas擴(kuò)展了一個(gè)Button組件，通過(guò)點(diǎn)擊“Click”按鈕，觸發(fā)onClick()方法，并通過(guò)調(diào)用createLinearGradient()方法，繪制出了一個(gè)線性漸變色。

圖6圖片上添加文字

示例代碼如下：

@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)建一個(gè)畫(huà)布      Canvas(this.context)        .width(1500)        .height(900)        .backgroundColor('#ffff00 ')      Column() {//設(shè)置按鈕的樣式        Button('Click').width(250).height(100).backgroundColor('#000000')          .onClick(() => {//創(chuàng)建一個(gè)線性漸變色            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)小游戲繪制實(shí)踐

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

圖7飛機(jī)大戰(zhàn)小游戲

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

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

2. 將圖片渲染到canvas畫(huà)布上。

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ī)向下移動(dòng)的效果。

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ī)圖片并渲染到畫(huà)布上。并且改變敵機(jī)y軸坐標(biāo)，使它向下運(yùn)動(dòng)。

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. 在頁(yè)面每隔120s出現(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ī)移動(dòng)位置，獲取拖動(dòng)的坐標(biāo)后重新設(shè)置戰(zhàn)機(jī)的圖片坐標(biāo)，使戰(zhàn)機(jī)實(shí)現(xiàn)拖動(dòng)效果。

.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;

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

以上就是本期全部?jī)?nèi)容，期待廣大開(kāi)發(fā)者能通過(guò)canvas組件繪制出精美的圖形。

原文標(biāo)題：canvas繪制“飛機(jī)大戰(zhàn)”小游戲，真香！

文章出處：【微信公眾號(hào)：HarmonyOS官方合作社區(qū)】歡迎添加關(guān)注！文章轉(zhuǎn)載請(qǐng)注明出處。