西南IT社区
    • 注册
    • 登录
    • 搜索
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 工作机会
    • 活动
    • 项目

    canvas组件

    极客生涯
    arkui canvas组件
    1
    1
    24
    正在加载更多帖子
    • 从旧到新
    • 从新到旧
    • 最多赞同
    回复
    • 在新帖中回复
    登录后回复
    此主题已被删除。只有拥有主题管理权限的用户可以查看。
    • S
      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开发范式”及“声明式开发范式”两种开发范式中进行提供。

      1 条回复 最后回复 回复 引用 0
      • First post
        Last post
      使用HTML构建办公软件 使用HTML构建办公软件 使用HTML构建办公软件
      S
      漫
      成
      Y
      洋
      书
      Y
      D
      U
      Y
      娇
      玩
      1
      光
      A
      庆
      小
      U
      Y
      L
      I
      Z
      I
      Y
      C

      西南地区IT社群(QQ)
      云南
      【昆明网页设计交流吧】243627302
      【昆明nodejs交流吧】 243626749
      【VUE】838405306
      【云南程序员总群】343606807
      【昆明UI设计】104031254
      【云南软件外包】15547313
      贵州
      【PHP/java源码/站长交流群】55692114
      四川
      【成都Java/JavaWeb交流】86669225
      【vaScript+PHP+MySql】116270060
      【UI设计/设计交流学习群】135794928
      重庆
      【诺基亚 JAVA游戏博物馆】 559479780
      【PHP,Java,Python,C++接单】 442103442
      西藏
      社群
      昆明网页设计交流吧
      友情链接
      • Funtask
      • Funtask 社区
      • SUWIS
      ©2019-2021 滇ICP备20006698号