，华为技术有限公司的江英杰为大家揭晓了关于开源鸿蒙 OpenHarmony 3.1 Beta 版中的一个关键特性，也就是ArkUI 开发框架中的 canvas 画布。

据介绍，canvas 是 ArkUI 开发框架里的画布组件，常用于自定义绘制图形因为其轻量，灵活，高效等优点，被广泛应用于 UI 界面开发中本期，我们将为大家介绍 ArkUI 开发框架中 canvas 组件的使用

canvas 介绍

1.1 什么是 canvas。。

本站了解到，在 Web 浏览器中，canvas 是一个可自定义 width，height 的矩形画布，画布左上角为坐标原点，以像素为单位，水平向右为 x 轴，垂直向下为 y 轴，画布内所有元素都基于原点进行定位。

如下图所示，我们可以通过 lt，canvasgt， 标签，创建了一个 width= 1500px，height=900px 的空白画布，我们还需要画笔才能绘制图形canvas 采用轻量的逐像素渲染机制，以 JS 为画笔直接控制画布像素，从而实现图形绘制

1.2 Canvas 的画笔

canvas 本身虽不具备绘制能力，但是提供了获取画笔的方法开发者可通过 getContext 方法获取 CanvasRenderingContext2D 对象完成 2D 图像绘制，或通过 getContext 方法获取 WebGLRenderingContext 对象完成 3D 图像绘制

除此之外，开发者还可以通过获取 OffscreenCanvasRenderingContext2D 对象进行离屏绘制，绘制方法同上当绘制的图形比较复杂时，频繁地删除与重绘会消耗很多性能

这时，开发者可以根据自身的需求灵活选取离屏渲染的方式，首先通过创建 OffscreenCanvas 对象作为一个缓冲区，然后将内容绘制在 OffscreenCanvas 上，最后再将 OffscreenCanvas 绘制到主画布上，以提高画布性能，确保绘图的质量。

canvas 基础绘制方法

通过上节对 canvas 组件的基本介绍，相信大家对 canvas 组件已经有了一定的认识，下面我们将为大家实际演示 canvas 组件在 ArkUI 开发框架中的使用方法ArkUI 开发框架参考了 Web 浏览器中 canvas 的设计，并在类 Web 开发范式及声明式开发范式两种开发范式中进行提供，接下来我们将分别介绍这两种开发范式中 canvas 的绘制方法

2.1 类 Web 开发范式中 canvas 的绘制方法

类 Web 开发范式，使用 HML 标签文件进行布局搭建，CSS 文件进行样式描述，并通过 JS 语言进行逻辑处理目前，JS 语言的 canvas 绘图功能已经基本上完善，下面我们将通过两个示例，展示基于 JS 语言的 canvas 组件基础使用方法

2.1.1 矩形填充

CanvasRenderingContext2D 对象提供了 fillRect 方法，用于绘制一个填充的矩形如下图所示，在画布内绘制了一个黑色的填充矩形，x 与 y 指定了在 canvas 画布上所绘制的矩形的左上角的坐标，width 和 height 则设置了矩形的尺寸

示例代码如下:

//创建一个width=1500px，height=900px的画布lt，!——xxx.hml——gt，lt，divgt，lt，canvasref="canvas"gt，lt，/canvasgt，lt，/divgt，

//xxx.jsexportdefaultonShowconstel=this.$refs.canvas，//获取2D绘制对象constctx=el.getContext，//设置填充为黑色ctx.fillStyle='#000000'，//设置填充矩形的坐标及尺寸ctx.fillRect，

2.1.2 缩放与阴影

CanvasRenderingContext2D 对象提供了 scale 方法，参数 x 表示横轴方向上缩放倍数，y 表示纵轴方向上缩放的倍数，值得注意的是缩放过程中定位也会被缩放如下图所示，是将上个示例中的填充矩形通过 scale 缩放，并通过 shadowBlur 方法加上阴影后的效果

示例代码如下:

//xxx.jsexportdefaultonShowconstel=this.$refs.canvas，constctx=el.getContext，//设置绘制阴影的模糊级别ctx.shadowBlur=80，ctx.shadowColor='rgb'，ctx.fillStyle='rgb'，//xScaleto200%，yScaleto150%ctx.scale，ctx.fillRect，

2.2 声明式开发范式中 canvas 的绘制方法

声明式开发范式，采用 TS 语言并进行声明式 UI 语法扩展，从组件，动效和状态管理三个维度提供了 UI 绘制能力，目前已经提供了 canvas 组件绘制能力，但功能仍在完善中下面我们将通过两个示例展示声明式开发范式中 canvas 组件的基础使用方法

扩展的 TS 语言采用更接近自然语义的编程方式，让开发者可以直观地描述 UI 界面，示例代码如下:

2.2.2 点击创建线性渐变

如下图所示，是一个线性渐变效果基于 canvas 扩展了一个 Button 组件，通过点击Click按钮，触发 onClick 方法，并通过调用 createLinearGradient 方法，绘制出了一个线性渐变色

示例代码如下:

EntryComponentstructGradientExampleprivatesettings:RenderingContextSettings=newRenderingContextSettings，privatecontext:RenderingContext=newRenderingContext，privategra:CanvasGradient=newCanvasGradient，buildColumn//创建一个画布Canvas.width.height.backgroundColorColumn//设置按钮的样式Button.width.height.backgroundColor.onClickgrad.addColorStop，grad.addColorStop，grad.addColorStop，this.context.fillStyle=grad，this.context.fillRect，).alignItems(HorizontalAlign.center)飞机大战小游戏绘制实践

如下图所示，是一款飞机大战小游戏，通过控制战机的移动摧毁敌机如何使用 ArkUI 开发框架提供的 canvas 组件轻松实现这个经典怀旧的小游戏

privateimgList:Arraylt，stringgt，=，

letimg:ImageBitmap=newImageBitmap/"+this.imgList(数组下标))，this.ctx.drawImage(img，150/*x坐标*/，150/*y坐标*/，600/*宽*/，600/*高*/)

this.ctx.drawImage，this.ctx.drawImage(this.bg，0，this.bgY—480)，this.bgY++480amp，amp，(this.bgY=0)，

5. 在页面每隔 120s 出现一排子弹，之后减小或增大轴的坐标达到子弹射出效果。

leti=0，setInterval=gt，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)，iimage.x+(i*10))this.ctx.drawImage(this.bulimg3，image.x+10+(i*10)，image.x+(i*10))i++，，120)

event.touches(0).localX，varoffsetY=event.localY||event.touches(0).localY，varw=this.heroImg(0).width，h=this.heroImg(0).height，varnx=offsetX—w/2，ny=offsetY—h/2，nxlt，20—w/2nx=20—w/2:nxgt，(this.windowWidth—w/2—20)nx=(this.windowWidth—w/2—20):0，nylt，0ny=0:nygt，(this.windowHeight—h/2)

注:本示例引用了部分开源资源，感兴趣的开发者可参考此开源资源，结合文中的实现思路补全代码。目前，已有400家应用服务合作伙伴，1700家硬件合作伙伴，130万开发者参与了鸿蒙系统生态建设。

以上就是本期全部内容，期待广大开发者能通过 canvas 组件绘制出精美的图形，更多 canvas 组件的详细使用方法，请参考文档进行学习: