小程序API能力集成指南——画布API汇总（五）

CanvasContext

canvas 组件的绘图上下文。

方法如下（4）：

setLineWidth

CanvasContext.setLineWidth

CanvasContext.setLineWidth(number lineWidth)

功能描述

设置线条的宽度

参数

number lineWidth

线条的宽度，单位 px

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 10);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(5);
ctx.moveTo(10, 30);
ctx.lineTo(150, 30);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(10);
ctx.moveTo(10, 50);
ctx.lineTo(150, 50);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(15);
ctx.moveTo(10, 70);
ctx.lineTo(150, 70);
ctx.stroke();
 
ctx.draw();

setLineJoin

CanvasContext.setLineJoin

CanvasContext.setLineJoin(string lineJoin)

功能描述

设置线条的交点样式

参数

string lineJoin

线条的结束交点样式

lineJoin 的合法值
值说明
bevel斜角
round圆角
miter尖角

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineJoin('bevel');
ctx.setLineWidth(10);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineJoin('round');
ctx.setLineWidth(10);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineJoin('miter');
ctx.setLineWidth(10);
ctx.moveTo(130, 10);
ctx.lineTo(220, 50);
ctx.lineTo(130, 90);
ctx.stroke();
 
ctx.draw();

👉 立即开发。

setLineCap

CanvasContext.setLineCap

CanvasContext.setLineCap(string lineCap)

功能描述

设置线条的端点样式

参数

string lineCap

线条的结束端点样式

lineCap 的合法值
值说明
butt向线条的每个末端添加平直的边缘。
round向线条的每个末端添加圆形线帽。
square向线条的每个末端添加正方形线帽。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 10);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineCap('butt');
ctx.setLineWidth(10);
ctx.moveTo(10, 30);
ctx.lineTo(150, 30);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineCap('round');
ctx.setLineWidth(10);
ctx.moveTo(10, 50);
ctx.lineTo(150, 50);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineCap('square');
ctx.setLineWidth(10);
ctx.moveTo(10, 70);
ctx.lineTo(150, 70);
ctx.stroke();
 
ctx.draw();

setLineDash

CanvasContext.setLineDash

CanvasContext.setLineDash(Array.<number> pattern, number offset)

功能描述

设置虚线样式。

参数

Array.<number> pattern

一组描述交替绘制线段和间距（坐标空间单位）长度的数字

number offset 虚线偏移量

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.setLineDash([10, 20], 5);
 
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(400, 100);
ctx.stroke();
 
ctx.draw();

setMiterLimit

CanvasContext.setMiterLimit

CanvasContext.setMiterLimit(number miterLimit)

功能描述

设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 CanvasContext.setLineJoin() 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。

参数

number miterLimit

最大斜接长度

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(1);
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(2);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(3);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(4);
ctx.moveTo(130, 10);
ctx.lineTo(220, 50);
ctx.lineTo(130, 90);
ctx.stroke();
 
ctx.draw();

👉 立即开发。

fillText 

CanvasContext.fillText

CanvasContext.fillText(string text, number x, number y, number maxWidth)

功能描述

在画布上绘制被填充的文本

参数

string text

在画布上输出的文本

number x

绘制文本的左上角 x 坐标位置

number y

绘制文本的左上角 y 坐标位置

number maxWidth

需要绘制的最大宽度，可选

示例代码

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

setFontSize

CanvasContext.setFontSize

CanvasContext.setFontSize(number fontSize)

功能描述

设置字体的字号

参数

number fontSize

字体的字号

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.setFontSize(20);
ctx.fillText('20', 20, 20);
ctx.setFontSize(30);
ctx.fillText('30', 40, 40);
ctx.setFontSize(40);
ctx.fillText('40', 60, 60);
ctx.setFontSize(50);
ctx.fillText('50', 90, 90);
 
ctx.draw();

setTextAlign

CanvasContext.setTextAlign

CanvasContext.setTextAlign(string align)

功能描述

设置文字的对齐

参数

string align

文字的对齐方式

align 的合法值
值说明
left左对齐
center居中对齐
right右对齐

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.setStrokeStyle('red');
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
 
ctx.setFontSize(15);
ctx.setTextAlign('left');
ctx.fillText('textAlign=left', 150, 60);
 
ctx.setTextAlign('center');
ctx.fillText('textAlign=center', 150, 80);
 
ctx.setTextAlign('right');
ctx.fillText('textAlign=right', 150, 100);
 
ctx.draw();

setTextBaseline

CanvasContext.setTextBaseline

CanvasContext.setTextBaseline(string textBaseline)

功能描述

设置文字的竖直对齐

参数

string textBaseline

文字的竖直对齐方式

textBaseline 的合法值
值说明
top顶部对齐
bottom底部对齐
middle居中对齐
normal居中对齐

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.setStrokeStyle('red');
ctx.moveTo(5, 75);
ctx.lineTo(295, 75);
ctx.stroke();
 
ctx.setFontSize(20);
 
ctx.setTextBaseline('top');
ctx.fillText('top', 5, 75);
 
ctx.setTextBaseline('middle');
ctx.fillText('middle', 50, 75);
 
ctx.setTextBaseline('bottom');
ctx.fillText('bottom', 120, 75);
 
ctx.setTextBaseline('normal');
ctx.fillText('normal', 200, 75);
 
ctx.draw();

👉 立即开发。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

论文研读_多目标部署优化：无人机在能源高效无线覆盖中的应用（ImMOGWO）精简版

论文研读_多目标部署优化：无人机在能源高效无线覆盖中的应用（ImMOGWO）精简版

此篇文章为Multi-objective Deployment Optimization of UAVs for Energy-Efficient Wireless Coverage的论文学习笔记&#xff0c;只供学习使用&#xff0c;不作商业用途&#xff0c;侵权删除。并且本人学术功底有限如果有思路不正确的地方欢迎批评指正! 创新点 RD算法 混合…
阅读更多...
热红外图像直方图修正显示

热红外图像直方图修正显示

热红外图像的直方图修正是一种用于增强图像对比度和可视化细节的技术。下面是一个使用Python和OpenCV库实现直方图均衡化的示例代码&#xff1a; import cv2 import numpy as np# 读取热红外图像 image cv2.imread(thermal_image.png, cv2.IMREAD_GRAYSCALE)# 对图像进行直方…
阅读更多...
.NetCore6.0实现ActionFilter过滤器记录接口请求日志

.NetCore6.0实现ActionFilter过滤器记录接口请求日志

文章目录 目的实现案例&#xff1a;一.首先我们新建一个WebApi项目二.配置 appsettings.json 文件&#xff0c;配置日志存放路径三.创建 Model 文件夹&#xff0c;创建AppConfig类和ErrorLog类1.在AppConfig类中编写一个GetConfigInfo方法获取配置文件中的值2.在ErrorLog类中&a…
阅读更多...
JAVA虚拟机实战篇之内存调优[1](内存泄露和溢出概念、常见场景、解决思路)

JAVA虚拟机实战篇之内存调优[1](内存泄露和溢出概念、常见场景、解决思路)

文章目录 内存泄漏&#xff08;memory leak&#xff09;内存溢出&#xff08;Out of Memory&#xff09;&#xff1a; 内存泄漏的常见场景场景一&#xff1a;未删除用户数据场景二&#xff1a;分布式任务调度 解决内存溢出解决内存溢出思路发现问题 – Top命令发现问题 – Visu…
阅读更多...
云计算OpenStack KVM迁移

云计算OpenStack KVM迁移

动态迁移 static migration 静态迁移 cold migration 冷迁移 offline migration 离线迁移 live migration 动态迁移 hot migration 热迁移 online migration 在线迁移 衡量 整体迁移时间 服务器停机时间 性能影响(迁移后和其它客户机) 特点 负载均衡 解除硬件依赖…
阅读更多...
算法刷题day22：双指针

算法刷题day22：双指针

目录 引言概念一、牛的学术圈I二、最长连续不重复序列三、数组元素的目标和四、判断子序列五、日志统计六、统计子矩阵 引言 关于这个双指针算法&#xff0c;主要是用来处理枚举子区间的事&#xff0c;时间复杂度从 O ( N 2 ) O(N^2) O(N2) 降为 O ( N ) O(N) O(N) &#xf…
阅读更多...
three.js如何实现简易3D机房？（四）点击事件+呼吸灯效果

three.js如何实现简易3D机房？（四）点击事件+呼吸灯效果

接上一篇&#xff1a; three.js如何实现简易3D机房&#xff1f;&#xff08;三&#xff09;显示信息弹框/标签&#xff1a;http://t.csdnimg.cn/5W2wA 目录 八、点击事件 1.实现效果 2.获取相交点 3.呼吸灯效果 4.添加点击事件 5.问题解决 八、点击事件 1.实现效果 2.…
阅读更多...
postman登录鉴权之接口测试

postman登录鉴权之接口测试

一.背景 在做接口测试的时候&#xff0c;有些接口向后台请求数据的时候&#xff0c;是需要用户在登录情况下才有数据返回。 以电商平台为例&#xff0c;用户的个人中心&#xff0c;用户的订单列表&#xff0c;用户的支付信息等等&#xff0c;所有用户维度的数据都是需要登录态…
阅读更多...
网络原理TCP_IP

网络原理TCP_IP

文章目录 应用层自定义协议 传输层udp协议TCP协议1.确认应答2.超时重传3.连接管理建立连接, 三次握手断开连接, 四次挥手tcp的状态 4.滑动窗口5.流量控制6.拥塞控制7.延时应答8.携带应答9.面向字节流10.异常情况 网络层IP协议地址管理路由选择 数据链路层以太网 应用层 自定义…
阅读更多...
okHttp MediaType MIME格式详解

okHttp MediaType MIME格式详解

一、介绍 我们在做数据上传时&#xff0c;经常会用到Okhttp的开源库&#xff0c;okhttp开源库也遵循html提交的MIME数据格式。 所以我们经常会看到applicaiton/json这样的格式在传。 但是如果涉及到其他文件等就需要详细的数据格式&#xff0c;否则服务端无法解析 二、okHt…
阅读更多...
【信息系统项目管理师】--【信息技术发展】--【新一代信息技术及应用】--【虚拟现实】

【信息系统项目管理师】--【信息技术发展】--【新一代信息技术及应用】--【虚拟现实】

文章目录 第二章 信息技术发展2.2 新一代信息技术及应用2.2.6 虚拟现实1.技术基础2.关键技术3.应用和发展 第二章 信息技术发展 信息技术是在信息科学的基本原理和方法下&#xff0c;获取信息、处理信息、传输信息和使用信息的应用技术总称。从信息技术的发展过程来看&#xff…
阅读更多...
3.5 力扣 交错字符串

3.5 力扣 交错字符串

97. 交错字符串 给定三个字符串 s1、s2、s3&#xff0c;请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的。 两个字符串 s 和 t 交错 的定义与过程如下&#xff0c;其中每个字符串都会被分割成若干 非空 子字符串&#xff1a; s s1 s2 ... snt t1 t2 ... tm|n - m| &…
阅读更多...
PDF处理控件aspose.PDF功能演示：将 PDF 转换为 Word 文档

PDF处理控件aspose.PDF功能演示：将 PDF 转换为 Word 文档

在 Web 应用程序中处理文档时&#xff0c;将 PDF 文件无缝转换为 Word 文档的能力是一项宝贵的资产。此任务不仅常见&#xff0c;而且对于文档转换器和编辑器、从编辑和协作到内容提取的各种应用程序来说也是必不可少的。在这篇博文中&#xff0c;我们将探讨如何使用 JavaScrip…
阅读更多...
【vue3之组合式API】

【vue3之组合式API】

组合式API 一、setup1.写法2.如何访问3.语法糖4.同步返回对象 二、reactive()和ref()1.reactive()2.ref() 三、computed四、watch函数1侦听单个数据2.侦听多个数据3. immediate4. deep5.精确侦听对象的某个属性 五、生命周期函数六、组件通信1.父传子2. 子传父 七、模版引用1. …
阅读更多...
数字创新的风口：创业者如何在Web3时代抢占先机

数字创新的风口：创业者如何在Web3时代抢占先机

随着区块链技术的不断发展&#xff0c;Web3正成为数字创新的新风口&#xff0c;为创业者们带来了前所未有的机遇和挑战。本文将从另一个角度探讨Web3对创业者的影响&#xff0c;并提出创业者在Web3时代抢占先机的策略和方法。 1. Web3重新定义了商业模式 Web3不仅仅是一种技术…
阅读更多...
Java设计模式：建造者模式之经典与流式的三种实现（四）

Java设计模式：建造者模式之经典与流式的三种实现（四）

本文将深入探讨Java中建造者模式的两种实现方式&#xff1a;经典建造者与流式建造者。建造者模式是一种创建型设计模式&#xff0c;它允许你构建复杂对象的步骤分解&#xff0c;使得对象的创建过程更加清晰和灵活。我们将通过示例代码详细解释这两种实现方式&#xff0c;并分析…
阅读更多...
重塑Android通信新格局：探秘Android 8.0之后的Binder架构革新

重塑Android通信新格局：探秘Android 8.0之后的Binder架构革新

重塑Android通信新格局：探秘Android 8.0 之后的Binder架构革新 1. 引言 Android作为全球主流移动操作系统，在移动设备领域扮演着举足轻重的角色。其开放性、灵活性和广泛的应用生态系统使得无数用户和开发者受益。作为一个基于Linux内核的操作系统，Android的核心架构设计至…
阅读更多...
Spring Webflux 详解

Spring Webflux 详解

目录 0、组件对比 1、WebFlux 1、引入 2、Reactor Core 1、HttpHandler、HttpServer 3、DispatcherHandler 1、请求处理流程 4、注解开发 1、目标方法传参 2.返回值写法 5、文件上传 6、错误处理 7、RequestContext 8、自定义Flux配置 9、Filter WebFlux&am…
阅读更多...
Elasticsearch模拟网络丢包

Elasticsearch模拟网络丢包

背景 Elasticsearch一旦遇到网络抖动就可能节点&#xff08;单个或者多个&#xff09;掉出集群。从而集群出现red/yellow状态&#xff0c;理论情况下ES会自愈&#xff0c;但某些情况下可能非预期&#xff0c;此时就需要我们模拟各种case了&#xff0c;比如网络丢包。 操作 1…
阅读更多...
postman Unable to load data as you are offline解决办法 重新登陆无效

postman Unable to load data as you are offline解决办法 重新登陆无效

postman Unable to load data as you are offline解决办法 重新登陆无效 也能如下一直打不开 - 重新登陆试过了 没有效果 - 刚刚代理切换到了全局,软件内的开关开启了 修改后
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站