IT之家 2 月 10 日消息，华为技术有限公司的江英杰为大家揭晓了关于开源鸿蒙 OpenHarmony 3.1 Beta 版中的一个关键特性，也就是 ArkUI 开发框架中的 canvas 画布。
据介绍，canvas 是 ArkUI 开发框架里的画布组件，常用于自定义绘制图形。因为其轻量、灵活、高效等优点，被广泛应用于 UI 界面开发中。本期，我们将为大家介绍 ArkUI 开发框架中 canvas 组件的使用。
canvas 介绍1.1 什么是 canvas？
IT之家了解到，在 Web 浏览器中，canvas 是一个可自定义 width、height 的矩形画布，画布左上角为坐标原点，以像素为单位，水平向右为 x 轴，垂直向下为 y 轴，画布内所有元素都基于原点进行定位。
如下图所示，我们可以通过 标签，创建了一个 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 组件已经有了一定的认识，下面我们将为大家实际演示 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, width, height) 方法，用于绘制一个填充的矩形。如下图所示，在画布内绘制了一个黑色的填充矩形，x 与 y 指定了在 canvas 画布上所绘制的矩形的左上角（相对于原点）的坐标，width 和 height 则设置了矩形的尺寸。


文章插图

示例代码如下：
//创建一个width=1500px，height=900px的画布

文章插图

示例代码如下：
//xxx.jsexport default {onShow() {const el =this.$refs.canvas;const ctx = el.getContext('2d');//设置绘制阴影的模糊级别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 声明式开发范式中 canvas 的绘制方法
声明式开发范式，采用 TS 语言并进行声明式 UI 语法扩展，从组件、动效和状态管理三个维度提供了 UI 绘制能力，目前已经提供了 canvas 组件绘制能力，但功能仍在完善中。下面我们将通过两个示例展示声明式开发范式中 canvas 组件的基础使用方法。
【 color|开源鸿蒙 OpenHarmony 3.1画布解析，教你如何完成飞机大战小游戏】2.2.1 图片叠加
如下图所示，是三张图片叠加的效果，顶层的图片覆盖了底层的图片。通过依次使用 drawImage (x,y, width, height) 方法设置图片坐标及尺寸，后面绘制的图片自动覆盖原来的图像，从而达到预期效果。

• ColorOS|Oppo Watch 2 收到 ColorOS Watch 3.0 更新
• 一加科技|一加OxygenOS 13官宣：将与OPPO ColorOS合并
• Windows11|麒麟990+5G+鸿蒙系统，华为旗舰跌至新低，花粉：幸福来得太突然
• Linux|华为鸿蒙系统的优势，真的太明显了，是面向未来的IOT系统
• 华为鸿蒙系统|华为公司推出新规，多款鸿蒙手机皆可升级，友商小算盘无奈落空
• 汽车|大型内卷现场！华为进军汽车领域，问界M5搭载鸿蒙OS系统
• 华为鸿蒙系统|华为厉害了，鸿蒙“助推器”正式上线
• 华为鸿蒙系统|华为手机用户“福利”来了！华为旧手机既能升级鸿蒙，还可以扩展内存
• 华为鸿蒙系统|完美的作品，一开始都是不被人看好的，期待华为科技
• 显示器|华为5G旗舰有货了，降到1899元，40w快充+鸿蒙OS