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;//获取2D绘制对象 const ctx = el.getContext('2d');//设置填充为黑色 ctx.fillStyle = '#000000';//设置填充矩形的坐标及尺寸 ctx.fillRect(200, 200, 300, 300); }}