HarmonyOS鸿蒙学习笔记(16)Canvas入门使用

news2025/1/20 21:55:49

Canvas入门指南

  • 1、Canvas代码结构
  • 2、简单案例
    • 2.1 fillStyle和fillRect 绘制蓝色矩形
    • 2.2 strokeRect和strokeStyle 绘制红色边框
    • 2.3 lineCap的使用
    • 2.4 lineJoin的使用
    • 2.5 closePath的使用
  • 3、参考资料

1、Canvas代码结构

在使用Canvas的时候,需要向初始化RenderingContextSettingsCanvasRenderingContext2D 两个组件,通过CanvasRenderingContext2D 提供的API来进行绘制。Canvas提供了onReady方法,可以在该方法里完成图形的绘制.

 @Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)//传context给Canvas
        .width('100%')
        .height('100%')
//        .aspectRatio(2.0)
        .backgroundColor('#ffffff')
        .onReady(() =>{
        })
    }
    .width('100%')
    .height('100%')
  }
}

2、简单案例

2.1 fillStyle和fillRect 绘制蓝色矩形

  //注意context为CanvasRenderingContext2D对象
   this.context.fillStyle = '#0000ff'//填充蓝色
  this.context.fillRect(100,200,100,100)

在这里插入图片描述

2.2 strokeRect和strokeStyle 绘制红色边框

  //红色边框
 this.context.strokeStyle = '#ff0000'
  //边框宽度
  this.context.lineWidth = 5
  this.context.strokeRect(100, 400, 100, 100)

在这里插入图片描述

2.3 lineCap的使用

指定线端点的样式,可选值为:

  • ‘butt’:线端点以方形结束。
  • ‘round’:线端点以圆形结束。
  • ‘square’:线端点以方形结束,该样式下会增加一个长度和线段厚度相同,宽度是线段厚度一半的矩形。
    默认值:‘butt’。
    lineCap属性有三个值:round、butt、square,其使用方法如下:
 this.context.strokeStyle = '#00ff00'
  this.context.lineWidth = 10
  this.context.beginPath()
  this.context.lineCap = 'round'
  this.context.moveTo(100, 100)
  this.context.lineTo(200, 100)
  this.context.stroke()

round、butt、square效果如果:从上到下依次是round、butt、square
在这里插入图片描述

2.4 lineJoin的使用

指定线段间相交的交点样式,可选值为:

  • ‘round’:在线段相连处绘制一个扇形,扇形的圆角半径是线段的宽度。
  • ‘bevel’:在线段相连处使用三角形为底填充, 每个部分矩形拐角独立。
  • ‘miter’:在相连部分的外边缘处进行延伸,使其相交于一点,形成一个菱形区域,该属性可以通过设置miterLimit属性展现效果。
    默认值:‘miter’。
 this.context.strokeStyle = '#ff0000'
  this.context.beginPath()
  this.context.lineWidth = 8
  this.context.lineJoin = 'miter'
  this.context.moveTo(30, 30)
  this.context.lineTo(120, 60)
  this.context.lineTo(30, 110)
  this.context.stroke()

miter,round,bevel效果依次如下:
在这里插入图片描述

2.5 closePath的使用

closePath结束当前路径形成一个封闭路径。

  this.context.strokeStyle = '#00ff00'
 //创建一个新的绘制路径。
   this.context.beginPath()
   this.context.lineWidth = 8
   this.context.lineJoin = 'round'
   //路径从当前点移动到指定点。
   this.context.moveTo(130, 30)
   //从当前点到指定点进行路径连接。
   this.context.lineTo(220, 60)
   this.context.lineTo(130, 110)
   //进行边框绘制操作。
   this.context.closePath()
   this.context.stroke()

效果如下:
在这里插入图片描述
当然还有其他很丰富的用法,可以参考官方资料

3、参考资料

Canvas官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/151999.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第四十七讲:IPv6基础知识

一、IPv6网络元素及概念 IPv6的网络元素如下图所示。 节点:任何运行IPv6的设备,包括路由器和主机(甚至还将包括PDA、冰箱、电视等)。邻节点:连接到同一链路上的节点。这是一个非常重要的概念,因为IPv6的邻…

JS面试题--this指向+面试题

this其他补充 内置函数的绑定思考 01_一些函数的this分析 // 1.setTimeout原理 // function hySetTimeout(fn, duration) { // fn.call(window) // }// hySetTimeout(function() { // console.log(this) // window // }, 3000)// setTimeout(function() { // console.l…

EEG论文阅读和分析:《Differential entropy feature for EEG-based emotion classification》

论文阅读《Differential entropy feature for EEG-based emotion classification》 论文的核心是提出差分熵作为特征,并且对差分差分熵和比例差分熵等特征进行对比研究。 算法流程步骤: 采样过程: A.预处理 根据受试者的压力反应&#xf…

零基础转行软件测试可行吗?

如今,随着人们对软件质量的要求越来越高,软件测试已经成为最热门的IT行业之一。不少非科班出身的转业者也纷纷开始观望这个行业,因此不少人会问,零基础转行软件测试有前途吗?答案显而易见,如果你想成为最炙…

【C语言】数据类型(基本类型、构造类型、类型转换)

⏰打卡:DAY1 🏆今日学习目标:数据类型(基本类型、构造类型、类型转换) ✨个人主页:颜颜yan_的个人主页 🎉专栏系列:从0开始学C语言 文章目录前言基本类型整型浮点型字符型构造类型数…

Mybatis学习——增删改(mysql8.0)

目录 一、配置文件 (一)添加mybatis依赖: (二)resources资源目录的配置 1.database.properties文件的设置 2.mybatis-config.xml文件的设置 二、引入原始类 三、DogDao接口,定义增删改功能 (一)单条数据增删改 1.新增 2.删除 3.修改 (二)多条…

Makefile详细教程

Makefile详细教程 我编写本指南是因为我永远无法完全理解 Makefile。 他们似乎充斥着隐藏的规则和深奥的符号,提出简单的问题并没有得到简单的答案。 为了解决这个问题,我花了几个周末的时间坐下来阅读所有关于 Makefile 的内容。 我已将最关键的知识浓…

【链表】leetcode206.反转链表(C/C++/Java/Js)

leetcode206.反转链表1 题目2 思路2.1 双指针法(迭代)2.2 递归法2.2.1 递归--从前往后翻转指针指向2.2.2 递归--从后往前翻转指针指向3 代码3.1 C版本(迭代)3.2 C版本(迭代递归)3.3 Java版本(迭…

【OpenDDS开发指南V3.20】第十章:Java Bindings

介绍 OpenDDS提供JNI绑定。Java应用程序可以像C++应用程序一样使用完整的OpenDDS中间件。 有关入门的信息,包括先决条件和依赖项,请参阅$DDS_ROOT/java/INSTALL文件。 Java版本9和更高版本使用Java平台模块系统。要在这些Java版本中使用OpenDDS,请将MPC特性Java_pre_jpms…

QT Echarts 联动共享数据表图 使用详解

Echarts是百度的一款可视化界面开发的平台,里面的地图以及数据可视化内容十分丰富,适合用于一些大屏数据显示项目或者一些ui界面开发。每一个ECharts图表使用一个无边框的QWebView来展示,这样多个不同类型的ECharts图表就是多个封装不同类型E…

kettle 筛选数据 并根据关键字段去重 设计

文章目录前言kettle 筛选数据 并根据关键字段去重 设计实现:1、配置sqlite 数据库链接2、先从test表里抽取数据3、将表输入查询的数据插入到excel里4、将筛选出来的数据根据id去重5、插入本地excel6、ETL 整体效果:7、测试:前言 如果您觉得有用的话,记得给博主点个赞…

安全轻量化股票看盘盯盘软件需要实现的功能和基本要求是什么?

有很多投资者是上班族的,因此是不能无时无刻盯盘看盘的,那么为了解决这个问题就需要用上轻量化股票看盘盯盘软件,那么一个安全的轻量化股票看盘盯盘软件需要具备哪些功能和基本要求呢?接下来小编为大家分析分析! 1.一定…

小试跨平台局域网文件传输工具NitroShare,几点感想

随着电脑系统国产化的推进,单位用的OA系统已转移到国产电脑上了,但是国产电脑上的操作系统基于Linux,软件商店里可选的应用软件还不够多,功能也还有待提高。为了提高处理效率,经常需要把文件从国产电脑传到Windows平台…

信息收集过程WAF绕过详解

今天继续给大家介绍渗透测试相关知识,本文主要内容是信息收集过程WAF绕过详解。 免责声明: 本文所介绍的内容仅做学习交流使用,严禁利用文中技术进行非法行为,否则造成一切严重后果自负! 再次强调:严禁对未…

浅析数据中心机架配电母线的应用及监控

摘要:本文先分析配电母线槽创新点和优势,然后结合湛江数据中心302机房母线槽建设对配电母线槽和列头柜两种供电方式进行经济效益对比,最后总结推广应用建议,以期为相关工程技术人员提供参考。 关键词:机架配电母线&a…

【动态路由和导航守卫】一.动态路由;二.路由中的查询参数;三.命名路由;四.命名视图;五.声明式导航 编程式导航;六.导航守卫

目录 一.动态路由 1.什么是动态路由? 2.动态路由如何进行参数的传递: (1)如何设置URL地址中的参数:/url/:参数名 (2)在组件中接收参数:this.$route.params.参数名 3.$route和$r…

最新版android-studio无法安装Lombok插件?魔改后可任意安装版本教程(附已魔改下载地址)

🤵‍♂️ 个人主页: 奇怪的守护神 👨‍💻 作者简介:十年全栈开发经验,团队负责人。喜欢钻研技术,争取成为编程达人 🎖️! 🗺️学海无涯苦作舟,🛤️…

【自学Python】Python字符串(string)

Python字符串(string) Python字符串(string)教程 字符串是一个不可改变的字节序列。字符串可以包含任意的数据,但是通常是用来包含可读的文本。 Python字符串(string) Python 字符串定义有五种形式,使用单引号、双引号、三个单引号 、三个双引号以及…

胡凡 《算法笔记》 上机实战训练指南 chap3 入门模拟: 3.2 查找元素

胡凡 《算法笔记》 上机实战训练指南 chap3 入门模拟: 3.2 查找元素 文章目录胡凡 《算法笔记》 上机实战训练指南 chap3 入门模拟: 3.2 查找元素【PAT B1041】考试座位号【PAT B1004】成绩排名【PAT B1028】人口普查解决过程(cpp)AC代码python实现AC代码pycode1pycode2未AC代码…

代码随想录算法训练营第7天 383.赎金信、454. 四数相加II、15.三数之和、18.四数之和

代码随想录算法训练营第7天 383.赎金信、454. 四数相加II、15.三数之和、18.四数之和 赎金信 力扣题目链接(opens new window) 给定一个赎金信 (ransom) 字符串和一个杂志(magazine)字符串,判断第一个字符串 ransom 能不能由第二个字符串 magazines 里面的字符构…