微信小程序使用canvas画的文字右对齐方法

最新推荐文章于 2023-07-28 17:44:30 发布
最新推荐文章于 2023-07-28 17:44:30 发布
阅读量2.4k 收藏 2
点赞数 2
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoshidaye666/article/details/105976862
版权 
ctx.fillText('借记卡-Ⅱ类', this.data.windowWidth - ctx.measureText('借记卡-Ⅱ类').width - 20, 110)
ctx.fillText('1万', this.data.windowWidth - ctx.measureText('1万').width - 20, 140)
ctx.fillText('20万', this.data.windowWidth - ctx.measureText('20万').width - 20, 170)

ctx.measureText()方法对文字段落宽度计算，比自己算靠谱。自己算的文字大小计算后右起点不一定合适。

赵自煜
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
安装Oracle10g遭遇ins_ctx.mk问题解决方法
09-10
在CentOS6.2操作系统下，安装oracle10g时遭遇ins_ctx.mk问题，这是缺少glibc-devel的32位包所导致，下面是解决方法
canvas文字居中；canvas画布文字右对齐；canvas画布文字左对齐；canvas文字自动换行；canvas设置行间距；
i_am_a_div的博客
06-14 8413
canvas文字居中；canvas画布文字右对齐；canvas画布文字左对齐；
解决koa2 ctx.render is not a function报错问题
10-18
主要介绍了解决koa2 ctx.render is not a function报错问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
LINUX7安装ORACLE报ins_ctx.mk
11-20
在LINUX7下安装ORACLE报ins_ctx.mk，日志中可以看到 INFO: /usr/lib64/libstdc++.so.5: undefined reference to `memcpy@GLIBC_2.14' collect2: error: ld returned 1 exit status 版本高了，换32位的版本也是不行的，按资源中的处理一下，就OK了，
微信小程序canvas画布绘制矩形、椭（圆）、直线、文字
01-09
微信小程序canvas画布绘制矩形、椭（圆）、直线、文字
Canvas_Textout_文字右对齐
yct0605的专栏
01-10 5434
Canvas_Textout_文字信息是以坐标点来输入文字的，默认的情况下是左对齐，居中对齐就要自己来确定输出字符串的长度和输出区域的长度来进行显示了。这里主要讲解右对齐输出文字信息，在网上找了找，还真找到了，拿来分享了，希望能够帮助需要的朋友们。 直接上代码了： 使用Textout输出： procedure TForm1.BitBtn1Click(Sender: TObject); be
canvas-3文本&图片绘制与转换.
weixin_34009794的博客
04-17 173
为什么80%的码农都做不了架构师？>>> ...
Canvas学习记录之fillText
万少博-FE
03-14 4637
最新更新时间：2020年03月14日16:20:22 《猛戳-查看我的博客地图-总有你意想不到的惊喜》 概述 本文内容：本文介绍基于fillText()绘制文本的一些基本用法，基本文本(字号、色值、字体)、填充文本、描边文本、自动换行文本、左对齐、右对齐、水平居中、垂直居中、在水平方向基于x轴某点中心对称、水平垂直居中 fillText(text, x, y [, maxWidth]); ...
微信小程序居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局
热门推荐
wy313622821的博客
04-21 5万+
布局、居中、解决兼容问题。
微信小程序 居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局
油焖茄子 的博客
07-28 7020
或者红色框加上：flex:1。//注意：这里的 height 写 100%会使得垂直居中可能会不生效。子类：display:inline/inline-block;需要知道控件的宽高，-100rpx为自身宽高（200）的一半。父类控件：position: relative;父类控件：position:relative;父类：text-align:center;水平居中B、相对父类控件–子控件绝对定位。子类控件：margin:0 auto;父类控件：display:flex;水平居中A：相对父类控件。
微信小程序canvas实现文字缩放
01-12
微信小程序canvas实现文字缩放，包含小程序项目所有文件，在小程序开发工具可直接打开，也可单独查看whml、wxss、js文件查看实现细节。
微信小程序利用Canvas绘制图片和竖排文字详解
12-09
闲暇时间抽个空写了个三国杀武将手册的小程序，中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码，然后提供保存图片到相册，最终让用户可以分享到朋友圈或其他平台。合成图片应该按照 Canvas 的...
微信小程序基于canvas渐变实现的彩虹效果示例
10-17
主要介绍了微信小程序基于canvas渐变实现的彩虹效果,结合实例形式分析了微信小程序线性渐变及圆形渐变的相关实现技巧,需要的朋友可以参考下
微信小程序基于canvas实现纯色背景抠图功能
06-11
微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现...
杭州电子科技大学数据结构(题目).pdf
04-26
杭州电子科技大学，期末考试资料，计算机专业期末考试试卷，试卷及答案，数据结构。
重庆大学 2010-2011(一)模拟电子技术A卷答案.pdf
最新发布
04-26
重庆大学期末考试试卷，重大期末考试试题，试题及答案
如何创意年会组织形式？.docx
04-26
年会班会资料，节目策划，游戏策划，策划案，策划方案，活动方案，筹办，公司年会，开场白，主持人，策划主题，主持词，小游戏。
基于Django框架的博客系统.zip
04-26
基于Django框架的博客系统.zip
【基于Springboot+Vue的Java毕业设计】校园服务平台项目实战(源码+录像演示+说明).rar
04-26
【基于Springboot+Vue的Java毕业设计】校园服务平台项目实战(源码+录像演示+说明).rar 【项目技术】 开发语言：Java 框架：Spingboot+vue 架构：B/S 数据库：mysql 【演示视频-编号：321】 https://pan.quark.cn/s/8dea014f4d36 【实现功能】 系统可以提供信息显示和相应服务，其管理员增删改查接单员和接单员资料，审核接单员预订订单，查看订单评价和评分，通过留言功能回复用户提问。
微信小程序用canvas画圆角矩形
04-28
要在微信小程序中使用Canvas绘制圆角矩形，可以使用以下步骤： 1. 在wxml文件中添加Canvas组件： ```html <canvas canvas-id="myCanvas"></canvas> ``` 2. 在js文件中获取Canvas对象： ```javascript const ctx = wx.createCanvasContext('myCanvas') ``` 3. 使用Canvas API绘制圆角矩形： ```javascript // 设置填充色 ctx.setFillStyle('#f00') // 设置边框颜色 ctx.setStrokeStyle('#000') // 设置边框宽度 ctx.setLineWidth(2) // 绘制圆角矩形 ctx.moveTo(x + r, y) ctx.lineTo(x + w - r, y) ctx.arc(x + w - r, y + r, r, -Math.PI / 2, 0) ctx.lineTo(x + w, y + h - r) ctx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2) ctx.lineTo(x + r, y + h) ctx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI) ctx.lineTo(x, y + r) ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 3 / 2) ctx.closePath() // 填充圆角矩形 ctx.fill() // 绘制边框 ctx.stroke() // 绘制完成 ctx.draw() ``` 其中，x、y、w、h、r分别代表圆角矩形的左上角x坐标、左上角y坐标、宽度、高度、圆角半径。可以根据自己的需求来修改这些值。 4. 在wxml文件中显示Canvas： ```html <canvas canvas-id="myCanvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;"></canvas> ``` 其中，canvasWidth和canvasHeight是根据Canvas绘制的圆角矩形的大小来计算的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值