<!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绘制文本自动换行的更多相关文章

  1. canvas绘制文本

    canvas绘制文本 属性和方法 font = value 设置字体 textAlign = value 设置字体对齐方式 start, end, left, right, center textBa ...

  2. canvas 绘制文本

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. HTML5 canvas绘制文本

    demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...

  4. canvas文本自动换行

    在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行,要进行截断另起一行来写.在此参考文章html5-canvas的绘制文本自动换行来做改写. 根据canvas宽度来做折行 在此根据 ...

  5. FontMetrics ----- 绘制文本,获取文本高度

    Canvas 绘制文本时,使用FontMetrics对象,计算位置的坐标. public static class FontMetrics { /** * The maximum distance a ...

  6. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  7. html5 canvas 笔记三(绘制文本和图片)

    绘制文本 fillText(text, x, y [, maxWidth])   在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...

  8. Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  9. 【朝花夕拾】Android自定义View篇之(三)Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

随机推荐

  1. Oracle plsql 触发器 查询/启用/停止

    在PLSQL中查询某个表的触发器脚本 select * from user_triggers where table_name='xxx' oracle触发器的启用和停用 1.禁用 table_nam ...

  2. Windows下的apache tomcat安装与配置

    在官网http://tomcat.apache.org下载apache tomcat,我下载的是7可以自行选择版本: 解压缩,把解压文件放入C盘根目录下 配置环境变量,变量名位CATLINA_HOME ...

  3. gdal 遥感影像水体数据提取

  4. 【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 ...

  5. DevOps时代的软件过程改进探讨 杨振涛 云加社区 今天 作者:杨振涛,腾讯云TVP 本文从Jenkins,DevOps,云原生等视角探讨了软件过程改进在各个时代的挑战和价值,重新审视了SPI在软件开发和交付的效率和质量提升方面的意义

    DevOps时代的软件过程改进探讨 杨振涛 云加社区 今天 作者:杨振涛,腾讯云TVP 本文从Jenkins,DevOps,云原生等视角探讨了软件过程改进在各个时代的挑战和价值,重新审视了SPI在软件 ...

  6. patch工具的使用

    1. 最简用法 patch -p1 < jello.patch

  7. 阿里云RDS与ECS服务器数据库做主从

    阿里云RDS与ECS服务器数据库做主从 [精] 里云RDS(数据库)基于飞天大规模分布式计算和存储能力,提供超高性价比的单机版实例,同时利用读写分离横向扩展读能力,满足网站类的业务需求.提供稳定.高性 ...

  8. Qt学习过程

    1.常用控件的使用[除了常见的还有QTableWidget.QTreeWidget...]2.信号与槽[需要知道connect函数的最后一个参数Qt::ConnectionType取不同枚举时的含义] ...

  9. PAT 甲级 1042 Shuffling Machine (20 分)(简单题)

    1042 Shuffling Machine (20 分)   Shuffling is a procedure used to randomize a deck of playing cards. ...

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