华为官方解析开源鸿蒙 OpenHarmony 3.1关键特性画布，教你如何完成飞机大战小游戏

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

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

canvas 介绍

1.1 什么是 canvas？

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

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

​1.2 Canvas 的“画笔”

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

目前，ArkUI 开发框架中的 WebGL1.0 及 WebGL2.0 标准 3D 图形绘制能力正在完善中，所以本文将着重介绍 2D 图像的绘制。如下图所示，是 CanvasRenderingContext2D 对象提供的部分 2D 图像绘制方法，丰富的绘制方法让开发者能高效地绘制出矩形、文本、图片等。

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

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

canvas 基础绘制方法

通过上节对 canvas 组件的基本介绍，相信大家对 canvas 组件已经有了一定的认识