canvas组件

[suoluogui73]

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

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

  我们能够通过<canvas>标签，创建出一个width=1500px，height=900px的空白画布，我们还需要“画笔”才能绘制图形。canvas采用轻量的逐像素渲染机制，以JS为“画笔”直接控制画布像素，从而实现图形绘制。
 
   canvas的“画笔”：其实canvas本身虽不具备绘制能力，但是提供了获取“画笔”的方法。开发者们可通过getContext('2d')方法获取CanvasRenderingContext2D对象完成2D图像绘制，或通过getContext('webgl')方法获取WebGLRenderingContext对象完成3D图像绘制。
目前，ArkUI开发框架中的WebGL1.0及WebGL2.0标准3D图形绘制能力正在完善中，所以本文将着重介绍2D图像的绘制。如图2所示，是CanvasRenderingContext2D对象提供的部分2D图像绘制方法，丰富的绘制方法让开发者能高效的绘制出矩形、文本、图片等。

  另外，开发者还可以获取OffscreenCanvasRenderingContext2D对象进行离屏绘制，绘制方法同上。
  当绘制的图形比较复杂时，频繁的删除与重绘会消耗很多性能。开发者可根据自身的需求灵活选取canvas的渲染方式。这时，开发者可以根据自身的需求灵活选取离屏渲染的方式，通过创建OffscreenCanvas对象作为一个缓冲区，然后将需要绘制的内容先绘制在OffscreenCanvas上，最后再将OffscreenCanvas绘制到主画布上，以提高画布性能，确保绘图的质量。
  ArkUI开发框架参考Web浏览器中canvas的设计，并在“类Web开发范式”及“声明式开发范式”两种开发范式中进行提供。