小程序API能力集成指南——画布API汇总(三)

CanvasContext

canvas 组件的绘图上下文。

方法如下(2):

arc

CanvasContext.arc

CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)

功能描述

创建一条弧线。

  • 创建一个圆可以指定起始弧度为 0,终止弧度为 2 * Math.PI。
  • 用 stroke 或者 fill 方法来在 canvas 中画弧线。

参数

number x

圆心的 x 坐标

number y

圆心的 y 坐标

number r

圆的半径

number sAngle

起始弧度,单位弧度(在 3 点钟方向)

number eAngle

终止弧度

boolean counterclockwise

弧度的方向是否是逆时针

示例代码

 <canvas canvas-id="myCanvas" style="border: 1px solid;"/>
const ctx = ty.createCanvasContext('myCanvas');// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.setFillStyle('#EEEEEE');
ctx.fill();ctx.beginPath();
ctx.moveTo(40, 75);
ctx.lineTo(160, 75);
ctx.moveTo(100, 15);
ctx.lineTo(100, 135);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();ctx.setFontSize(12);
ctx.setFillStyle('black');
ctx.fillText('0', 165, 78);
ctx.fillText('0.5*PI', 83, 145);
ctx.fillText('1*PI', 15, 78);
ctx.fillText('1.5*PI', 83, 10);// Draw points
ctx.beginPath();
ctx.arc(100, 75, 2, 0, 2 * Math.PI);
ctx.setFillStyle('lightgreen');
ctx.fill();ctx.beginPath();
ctx.arc(100, 25, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();ctx.beginPath();
ctx.arc(150, 75, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();// Draw arc
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
ctx.setStrokeStyle('#333333');
ctx.stroke();ctx.draw();

针对 arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下:

  • 绿色: 圆心 (100, 75)
  • 红色: 起始弧度 (0)
  • 蓝色: 终止弧度 (1.5 * Math.PI)

👉 立即开发。

rect

CanvasContext.rect

CanvasContext.rect(number x, number y, number width, number height)

功能描述

创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.rect(10, 10, 150, 75);
ctx.setFillStyle('red');
ctx.fill();
ctx.draw();

arcTo

CanvasContext.arcTo

CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)

功能描述

根据控制点和半径绘制圆弧路径。

参数

number x1

第一个控制点的 x 轴坐标

number y1

第一个控制点的 y 轴坐标

number x2

第二个控制点的 x 轴坐标

number y2

第二个控制点的 y 轴坐标

number radius

圆弧的半径

fillRect

CanvasContext.fillRect

CanvasContext.fillRect(number x, number y, number width, number height)

功能描述

填充一个矩形。用 setFillStyle 设置矩形的填充色,如果没设置默认是黑色。

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 75);
ctx.draw();

strokeRect

CanvasContext.strokeRect

CanvasContext.strokeRect(number x, number y, number width, number height)

功能描述

画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色,如果没设置默认是黑色。

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

const ctx = ty.createCanvasContext('myCanvas');ctx.setStrokeStyle('red');
ctx.strokeRect(10, 10, 150, 75);
ctx.draw();

👉 立即开发。

clearRect

CanvasContext.clearRect

CanvasContext.clearRect(number x, number y, number width, number height)

功能描述

清除画布上在该矩形区域内的内容

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

clearRect 并非画一个白色的矩形在地址区域,而是清空,为了有直观感受,对 canvas 加了一层背景色。

<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>
const ctx = ty.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(0, 0, 150, 200);
ctx.setFillStyle('blue');
ctx.fillRect(150, 0, 150, 200);
ctx.clearRect(10, 10, 150, 75);
ctx.draw();

fill

CanvasContext.fill

CanvasContext.fill()

功能描述

对当前路径中的内容进行填充。默认的填充色为黑色。

示例代码

如果当前路径没有闭合,fill() 方法会将起点和终点进行连接,然后填充。

const ctx = ty.createCanvasContext('myCanvas');
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.fill();
ctx.draw();

fill() 填充的的路径是从 beginPath() 开始计算,但是不会将 fillRect() 包含进去。

stroke

CanvasContext.stroke

CanvasContext.stroke()

功能描述

画出当前路径的边框。默认颜色色为黑色。

示例代码

const ctx = ty.createCanvasContext('myCanvas');ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.stroke();
ctx.draw();

stroke() 描绘的的路径是从 beginPath() 开始计算,但是不会将 strokeRect() 包含进去。

const ctx = ty.createCanvasContext('myCanvas');
// begin path
ctx.rect(10, 10, 100, 30);
ctx.setStrokeStyle('yellow');
ctx.stroke();// begin another path
ctx.beginPath();
ctx.rect(10, 40, 100, 30);// only stoke this rect, not in current path
ctx.setStrokeStyle('blue');
ctx.strokeRect(10, 70, 100, 30);ctx.rect(10, 100, 100, 30);// it will stroke current path
ctx.setStrokeStyle('red');
ctx.stroke();
ctx.draw();

closePath

CanvasContext.closePath

CanvasContext.closePath()

功能描述

关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径,那之前的路径将不会被渲染。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
ctx.draw();

👉 立即开发。

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

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

相关文章

android开发者工具,最新整理

一 Java相关 1.重载函数的签名(区别是否是重载函数) 答&#xff1a;方法名参数类型参数顺序(返回值不是) 2.finalize的工作原理 答&#xff1a;一旦垃圾收集器准备好释放对象占用的存储空间&#xff0c;它首先调用finalize()&#xff0c;而且只有在下一次垃圾收集过程中&#…

AlibabaCloud微服务:Linux 部署 Sentinel 流量控制

目录 一、实验 1.环境 2.Linux 部署 Sentinel 3. 微服务接入Sentinel配置 二、 问题 1.Linux本地启动Sentinel控制台 2.JDBC连接失败 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统软件版本IP备注Linuxopenjdk 1.8.0192.168.204.200 maven3.5.0nac…

构建强大的Spring Boot多租户系统

在当今互联网时代&#xff0c;许多企业都在寻求更灵活和可扩展的解决方案来满足不断增长的业务需求。Spring Boot多租户系统为企业提供了一种有效的方式&#xff0c;以实现更好的资源利用率和业务逻辑的隔离。本文将深入讨论Spring Boot多租户系统的关键方面&#xff0c;包括租…

服务器硬件基础知识

服务器硬件是指构成服务器的各种硬件组件&#xff0c;包括主板、处理器、内存、硬盘、电源等。这些硬件组件相互协作&#xff0c;为服务器提供计算和存储能力&#xff0c;使其能够运行各种应用程序和服务。 主板&#xff08;Motherboard&#xff09; 主板是服务器的核心组件&am…

C++ 20标准协同程序(协程)基于编译器展开的 stackless 协程。

在查阅本文之前&#xff0c;请先查看本人的另外一篇关于协同程序切换的文献&#xff0c;这对于如何正确协同程序编程很有价值。 C/C 如何正确的切换协同程序&#xff1f;&#xff08;基于协程的并行架构&#xff09;-CSDN博客 我本人相当反对&#xff0c;在项目之中使用 C 20标…

【踩坑专栏】追根溯源,从Linux磁盘爆满排查故障:mycat2与navicat不兼容导致日志暴增

昨天遇到了一个比较奇怪的问题&#xff0c;就是在挂起虚拟机的时候&#xff0c;虚拟机提示我XX脚本正在运行&#xff0c;很奇怪&#xff0c;我没有运行脚本&#xff0c;为什么会提示我这个呢。今天恢复虚拟机&#xff0c;也提示了一下脚本的问题&#xff0c;而且发现Linux明显异…

基于单片机的便携式快速干衣设备设计

摘 要:以单片机为核心,设计了一种便携式快速干衣装置。该装置基于单片机对风扇、加热器、臭氧发生装置等进行控制,通过监测热风温度、衣服干燥程度等参数,将热风送入烘干服中,在湿衣内部进行加热,从而达到快速烘干、安全工作的效果。本设计采用单片机语言编程,具有操作…

关于制作Python游戏全过程(汇总1)

目录 前言: 1.plane_sprites模块: 1.1导入模块: 1.1.1pygame&#xff1a;一个用于创建游戏的Python库。 1.1.2random&#xff1a;Python标准库中的一个模块&#xff0c;用于生成随机数。 1.2定义事件代号: 1.2.1ENEMY_EVENT&#xff1a;自定义的敌机出场事件代号&#xf…

zsh: command not found: mongo(mac版已解决)

配置背景 基础信息&#xff1a;Macbook pro (m1 pro) 配置方式&#xff1a;采用 Homebrew 进行配置 解决流程 具体流程&#xff1a; 1-打开终端 2-查看 mongodb formulae brew list我的是 mongodb-community5.0 3-查看并复制mongodb安装目录 nathanchenNathansMacBook…

目标检测5:采用yolov8, RK3568上推理实时视频流

上一个效果图&#xff0c;海康球机对着电脑屏幕拍&#xff0c;清晰度不好。 RK3568接取RTSP视频流&#xff0c;通过解码&#xff0c;推理&#xff0c;编码&#xff0c;最终并把结果推出RTSP视频流。 数据集采用coco的80个种类集&#xff0c;通过从yovo8.pt&#xff0c;转换成R…

智慧城市/雪亮工程中网页低延迟多屏播放海康威视大华华为等监控视频解决方案

在传统安防项目中&#xff0c;一般视频监控系统采用的是C/S结构实现在电脑端或者手机端实时预览视频监控画面&#xff0c;但是随着智慧城市、雪亮工程、平安社区等项目在全国各地展开&#xff0c;视频监控系统更多应用在B/S结构项目上。但是普遍存在摄像头视频在网页中播放目前…

flutter开发文档,靠着这份面试题跟答案

1、知道它是什么、有什么用 相信很多人在学习的时候&#xff0c;一开始都会在网上找一整套资料或者买一本书来学习&#xff0c;结果就是内容太多&#xff0c;学了记不住或者学到一半感觉很难&#xff0c;便放弃了&#xff0c;更别提写代码了&#xff0c;根本无从入手。 而更好…

Python+Vue全栈开发BI数据可视化项目

如何得到这样一个大屏可视化展示 数据清洗&#xff0c;运算&#xff0c;建模&#xff0c;分析&#xff0c;可视化

笔记:Linux下的Oracle日常简单检查

日常检查 01 00 * * * /root/lcl/daycheck.sh >> /root/lcl/daycheck.sh.log 2>&1daycheck.sh #!/bin/sh current_datetime$(date "%Y%m%d_%H%M%S") file_name"wmsdb_daycheck_$current_datetime.log" file"/root/lcl/log/${file_…

java核心技术第十一章学习笔记

swing常用用户界面组件 Swing和模型-视图-控制器设计模式 模型&#xff1a;存储内容&#xff0c;必须实现改变内容和查找内容的方法&#xff0c;不可见 视图&#xff1a;显示内容 控制器&#xff1a;处理用户输入 一个模型可以有多个视图&#xff0c;每个视图可以显示全部…

嵌入式学习 Day 27

1.信号&#xff1a; 1.pause int pause(void); 功能: 让进程睡眠,直到接收到信号(捕捉)才能继续向下执行 2.alarm unsigned int alarm(unsigned int seconds); 功能: 定时seconds秒后给调用进程发送SIGALRM信号 参数: seconds:定时的…

微信小程序开发系列(十九)·wxml语法·setData()修改数据

目录 步骤一&#xff1a;创建一个data对象 步骤二&#xff1a;双大括号写法的使用 步骤三&#xff1a;创建一个更新事件按钮 步骤四&#xff1a;定义事件处理函数获取数据 步骤五&#xff1a;定义事件处理函数修改数据 方法一&#xff1a;通过赋值的方式直接修改数据 方…

android音视频编解码,你有过迷茫吗

3-5年的Android工程师最容易遇到的4个瓶颈是什么&#xff1f; 1.原理认知浅 工作内容多是简单UI界面开发和第三方SDK整合&#xff0c;对原理层和底层开发了解不深 2.技术视野窄 长期在小型软件公司&#xff0c;外包公司工作&#xff0c;技术视野被限制的太厉害 3.薪资提升…

java算法第十三天 | ● 239. 滑动窗口最大值 ● 347.前 K 个高频元素 ● 总结

239. 滑动窗口最大值 leetcode链接 之前讲的都是栈的应用&#xff0c;这次该是队列的应用了。 本题算比较有难度的&#xff0c;需要自己去构造单调队列&#xff0c;建议先看视频来理解。 思路&#xff1a; 自定义一个单调队列维护当前滑动窗口的最大值。 代码随想录解题思路 …

React富文本编辑器开发(五)

到目前为止我们所有的功能操作都是直接写在 onKeydown 事件里了&#xff0c;但如果我想复用相同的功能怎么办呢&#xff0c;最好的办法就是拨离了&#xff0c;下面我就形如进行这样的操作&#xff0c;把相关的可复用的命令操作抽取出来。 新建文件 _helper.jsx,创建一个协助器…