中国总决赛
全球总决赛
学习进度
待补充
省赛
√
能力分类
主要子系统
能力模型
drawing接口与Canvas
Canvas
Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制（单位默认为vp），绘制对象可以是基础形状、文本、图片等。
方案 | 适用场景 | 特点 |
使用Canvas CanvasRenderingContext2D | Web应用和游戏、快速原型设计、数据可视化、在线绘图板、教学工具、创意应用 | 场景简单、跨平台、快捷灵活、兼容性强、开发维护成本低、性能要求低。 |
使用Native Drawing | 高性能游戏开发、专业图形处理软件、桌面或移动应用开发 | 场景复杂、资源管理精细、硬件依赖强、与平台深度集成、定制化、性能要求高。 |
约束与限制
- canvas 标签默认宽度300px、高度150px。
- 同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。
- Canvas 2D需要显式设置画布宽高，默认：300px*150px，最大：1365px*1365px。
使用画布组件绘制自定义图形
- 使用CanvasRenderingContext2D对象在Canvas画布上绘制。
- 离屏绘制是指将需要绘制的内容先绘制在缓存区，再将其转换成图片，一次性绘制到Canvas上，加快了绘制速度。过程为：
- 通过transferToImageBitmap方法将离屏画布最近渲染的图像创建为一个ImageBitmap对象。
- 通过CanvasRenderingContext2D对象的transferFromImageBitmap方法显示给定的ImageBitmap对象。
drawing接口
drawing模块提供了基本的绘制能力，如绘制矩形、圆形、点、直线、自定义Path、字体等等。
- 导入：import drawing from '@ohos.graphics.drawing'
- 本模块采用屏幕物理像素单位px
使用Native侧Drawing绘制
Native Drawing主要使用分层接口OH_Drawing_CanvasSaveLayer和融合接口OH_Drawing_BrushSetBlendMode来实现多图融合效果。通过在前端创建一个自绘制节点RenderNode，并将图形绘制上下文及背景图参数通过Native侧暴露的接口传入，由Native使用相应Drawing接口进行绘制。
