canvas绘制文本自动换行
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
body {
padding: 20px;
background: #eee;
} #canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script type="text/javascript">
//寻找切换断点
function findBreakPoint(text, width, context) {
var min = 0;
var max = text.length - 1; while (min <= max) {
var middle = Math.floor((min + max) / 2);
var middleWidth = context.measureText(text.substr(0, middle)).width;
var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
return middle;
}
if (middleWidth < width) {
min = middle + 1;
} else {
max = middle - 1;
}
} return -1;
} function breakLinesForCanvas(text, width, font) {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var result = [];
var breakPoint = 0; if (font) {
context.font = font;
} while ((breakPoint = findBreakPoint(text, width, context)) !== -1) {
result.push(text.substr(0, breakPoint));
text = text.substr(breakPoint);
} if (text) {
result.push(text);
} return result;
} var result = breakLinesForCanvas(
'使用很寻常的二分查找，如果某一个位置之前的文字宽度小于等于设定的宽度，并且它之后一个字之前的文字宽度大于设定的宽度，那么这个位置就是文本的换行点。上面只是找到一个换行点，对于输入的一段文本，需要循环查找，直到不存在这样的换行点为止, 完整的代码如下',
300, '16px 微软雅黑');
console.log(result); var lineHeight = 30;
var context = document.getElementById('canvas').getContext('2d');
context.font = "16px 微软雅黑"; result.forEach(function(line, index) {
context.fillText(line, 100, lineHeight * index + 30);
});
</script>
</html>
canvas绘制文本自动换行的更多相关文章
- canvas绘制文本
canvas绘制文本 属性和方法 font = value 设置字体 textAlign = value 设置字体对齐方式 start, end, left, right, center textBa ...
- canvas 绘制文本
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5 canvas绘制文本
demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...
- canvas文本自动换行
在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行,要进行截断另起一行来写.在此参考文章html5-canvas的绘制文本自动换行来做改写. 根据canvas宽度来做折行 在此根据 ...
- FontMetrics ----- 绘制文本，获取文本高度
Canvas 绘制文本时,使用FontMetrics对象,计算位置的坐标. public static class FontMetrics { /** * The maximum distance a ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- html5 canvas 笔记三（绘制文本和图片）
绘制文本 fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...
- Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...
- 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...
随机推荐
- Oracle plsql 触发器 查询/启用/停止
在PLSQL中查询某个表的触发器脚本 select * from user_triggers where table_name='xxx' oracle触发器的启用和停用 1.禁用 table_nam ...
- Windows下的apache tomcat安装与配置
在官网http://tomcat.apache.org下载apache tomcat,我下载的是7可以自行选择版本: 解压缩,把解压文件放入C盘根目录下 配置环境变量,变量名位CATLINA_HOME ...
- gdal 遥感影像水体数据提取
- 【Canvas】勾画调和级数Harmonic series 曲线 y=1+1/2+1/3+1/4+1/5+1/6+1/7+1/8+....
相关资料:https://baike.baidu.com/item/%E8%B0%83%E5%92%8C%E7%BA%A7%E6%95%B0/8019971?fr=aladdin 调和级数(英语:Ha ...
- DevOps时代的软件过程改进探讨 杨振涛 云加社区 今天 作者：杨振涛，腾讯云TVP 本文从Jenkins，DevOps，云原生等视角探讨了软件过程改进在各个时代的挑战和价值，重新审视了SPI在软件开发和交付的效率和质量提升方面的意义
DevOps时代的软件过程改进探讨 杨振涛 云加社区 今天 作者:杨振涛,腾讯云TVP 本文从Jenkins,DevOps,云原生等视角探讨了软件过程改进在各个时代的挑战和价值,重新审视了SPI在软件 ...
- patch工具的使用
1. 最简用法 patch -p1 < jello.patch
- 阿里云RDS与ECS服务器数据库做主从
阿里云RDS与ECS服务器数据库做主从 [精] 里云RDS(数据库)基于飞天大规模分布式计算和存储能力,提供超高性价比的单机版实例,同时利用读写分离横向扩展读能力,满足网站类的业务需求.提供稳定.高性 ...
- Qt学习过程
1.常用控件的使用[除了常见的还有QTableWidget.QTreeWidget...]2.信号与槽[需要知道connect函数的最后一个参数Qt::ConnectionType取不同枚举时的含义] ...
- PAT 甲级 1042 Shuffling Machine (20 分)（简单题）
1042 Shuffling Machine (20 分) Shuffling is a procedure used to randomize a deck of playing cards. ...
- matlab学习——02整数规划(蒙特卡洛法,指派问题，混合整数规划)
02整数规划 蒙特卡洛法(随机取样法) 编写文件mengte.m,目标函数f和约束向量g function[f,g]=mengte(x); f=x(1)^2+x(2)^2+3*x(3)^2+4*x(4 ...