canvas实现分散对齐

最新推荐文章于 2024-01-06 00:30:00 发布

爱编程的兔子

最新推荐文章于 2024-01-06 00:30:00 发布

阅读量1.7k

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/wjnf012/article/details/80439913

版权

本文探讨了如何在canvas中实现文字的分散对齐。通过将canvas宽度分成多个部分，并将每个文字放置在相应部分的中心，实现了类似的效果。文中提供了使用JS和原生JavaScript的代码示例。

摘要由CSDN通过智能技术生成

canvas水平对齐方式有：

值	描述
start	默认，文本在指定的位置开始
end	文本在指定的位置结束
center	文本的中心被放置在指定的位置
left	文本左对齐
right	文本右对齐

JS调用：

ctx.textAlign = "center | end | left | right | start";

那么问题来了，如果我们要实现左右分散对齐呢？
我有个不成熟的办法，仅供参考，如果有更好的办法，请在评论区告诉我。

主要思想：我们先看看ctx.textAlign = "center"的含义：文本的中心位置放置在指定的位置，那我们现在假设canvas的宽度为L，需要居中的字符串length为N,然后我们将宽度分为N+1，每个放在每一段的中间，可能解释的有点不好理解，看看示意图：
这里写图片描述

废话不多说了，直接上代码：
需要引用Jquery的：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></t

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱编程的兔子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

WPF中有哪些布局方式和对齐方法

琅嬛福地

11-14

973

在WPF (Windows Presentation Foundation) 中，你可以使用多种方式来进行元素的对齐，这主要取决于你使用的布局容器类型。``Grid` 是WPF中最常用的布局容器之一。你可以通过定义行和列以及将元素放置在特定的行和列中来进行对齐。属性，你可以设置元素的边距来进行对齐。这个属性接受四个参数，分别是左，上，右，底的边距。以上就是在WPF中常用的对齐方式。具体使用哪种方式取决于你的布局需求和个人喜好。Orientation` 属性，你可以控制元素是水平对齐还是垂直对齐。

【系统架构设计师】论文：论面向服务的架构设计及其应用

最新发布

数据知道的博客

09-02

1650

我参加了公司“数据中心管理系统”项目的开发，并担任系统架构师职务，负责系统的架构设计。该系统旨在将公司分散在全国各地的数据中心内的设备状态与信息通过一系列传输协议发送到服务端，服务端进行分析和处理后反馈给设备操作指令或给管理人员发送通知信息，最终实现终端监控并管理所有设备。本文以数据中心管理系统为例，论述了软件架构风格在项目中的选择与应用。

参与评论您还未登录，请先登录后发表或查看评论

Canvas绘制文字自动换行+两端对齐

Hoitsuhan的博客

09-29

1766

Canvas绘制文字自动换行+两端对齐主要思想：设置每行限制长度，循环判断在不超过长度限制的情况下，每行最多有多少字。限制长度除以字数，平均分配每个字长度。逐字插入每个文字，每个字占有同样的长度。 const ctx = Taro.createCanvasContext("cav", this); const canvasWidth: number = 750; const canvasHeight: number = 1334; // 绘制文字 const titleTop:

Canvas 文字的对齐方式(textAlign(),textBaseline())

houyanhua1的专栏

04-14

6136

demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas {

canvas文字居中；canvas画布文字右对齐；canvas画布文字左对齐；canvas文字自动换行；canvas设置行间距；

i_am_a_div的博客

06-14

9374

canvas文字居中；canvas画布文字右对齐；canvas画布文字左对齐；

canvas笔记-文本水平垂直对齐与度量

IT1995的博客

06-02

1396

在canvas中通过textAlign可以设置文本的对齐：其中left为左对齐，center为居中对齐，right为右对齐。程序运行截图如下：源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id

两端分散对齐的Textview

易瑞的博客

08-07

307

记录一个TextView,以防忘记 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Rect; import android.t...

Canvas详解

热门推荐

发果叁

05-23

3万+

一、canvas 简介 1.1 什么是 canvas？（了解）是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页

第157天：canvas基础知识详解

lelara的博客

01-26

614

目录一、canvas简介 1.1 什么是canvas？（了解） 1.2 canvas主要应用的领域（了解）二、canvas绘图基础 2.0 sublime配置canvas插件（推荐） 2.1 Canvas标签 2.1.1 canvas标签语法和属性（重点） 2.1.2 浏览器不兼容处理（重点） 2.2 canvas绘图上下文context 6 2.2.1 ...

copy-canvas:复制HTML5画布的更对称的方法

05-16

复制画布复制HTML5画布的更对称的方法安装如果尚未下载node，请从下载并安装。 npm install copy-canvas --save 用法 // require module var copyCanvas = require ( 'copy-canvas' ) ; // create canvas let canvas = document . createElement ( 'canvas' ) // draw a circle let ctx = canvas . getContext ( '2d' ) ctx . beginPath ( ) ctx . arc ( 150 , 100 , 50 , 0 , 2 * Math . PI ) ctx . stroke ( ) // copy canvas let copy = copyCanvas ( canvas

实现canvas中的文本水平居中、垂直居中

我的博客

01-10

6647

环境：uniapp项目一、view视图 <canvas style="width: 400px; height: 40px;" canvas-id="myCanvas" id="myCanvas"></canvas> 二、js代码 onReady(e) { var ctx = uni.createCanvasContext('myCanvas') ctx.font="16px Arial"; ctx.textAlign = "center"

text-align:center 与 <center> 的区别

HaC 的博客

07-12

7097

下面通过一个例子来说明：先贴代码：<div style="text-align:center"> 我是文字居中< <p>我也居中</p> <div style="display:block; width:200px; background-color:yellow;border:2px solid #F00;"> 我是块元素我不居中</div> </div><center> 我居中了 <p>我也居

canvas实现文字水平居中

badmoonc的博客

01-12

2万+

今天接到一个需求，需要在浏览器tab页的icon上显示消息的数量，无奈只能用canvas来实现。实现的过程中就碰到文字居中，对canvas完全没用过的我来说简直是让人抓狂，百度出来的答案要么太复杂，要么说的不清楚。接下来我们就来看下，在canvas中如何让文字在画布中水平居中首先呢，我们先在html中加入canvas标签，如下： <canvas id="myCanvas" width...

ctx.fillText水平居中问题

liyichuanZhengzhou的博客

03-14

2205

设置 ctx.textAlign = 'center'; 居然不起作用，仔细看了下H5文档，在X轴上设置画布宽/2，水平居中起作用了。 ctx.textAlign = 'center'; ctx.fillText(qrNameTextbox1, ctx.width/2, 430, ctx.width-20);

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

zhaoge's blog

05-07

2554

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.dat...

canvas 实心文字设置（含最大宽度）的示例

大剑师兰特的GIS世界

01-06

1216

如何使用canvas设置文字呢？canvas内置了一个阴影的方法，使用ctx.fillText即可。文字的填充色使用fillStyle，文字的边框颜色使用strokeStyle。文字的大小和文字使用ctx.font来做设置。

canvas文本首行缩进和换行处理

ln的博客

03-17

3692

/** * * @param ctx 2d上下文对象 * @param text 绘制文本 * @param x 坐标轴x位置 * @param y 坐标轴y位置 * @param options 包含 maxWidth 最大宽度，lineHeight 文字行高，row 限制行数，textIndent 首行缩进，fontSize 文字大小 */ function textEl...