<!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. 【java反射】

    反射之中包含了一个「反」字,所以想要解释反射就必须先从「正」开始解释. 一般情况下,我们使用某个类时必定知道它是什么类,是用来做什么的.于是我们直接对这个类进行实例化,之后使用这个类对象进行操作. A ...

  2. ASP.NET进行请求转发

    前言 前两天将网站的部分功能在小程序上实现,网站的后台是http,没有配置域名和安全证书,小程序的线上版本是无法访问的,因此需要从配有域名和安全证书的站点进行转发.即小程序请求A,A转发请求到B,B获 ...

  3. sklearn中的弹性网函数 ElasticNet

    语法:  ElasticNet(self, alpha=1.0, l1_ratio=0.5, fit_intercept=True, normalize=False, precompute=False ...

  4. 【Oracle】往Oracle11g的某表插入近千万条记录，耗时略超一小时

    和MySql的对比下,两者有数量级的差距. 表ddl: CREATE TABLE tb04 ( "ID" ,) not null primary key, "NAME&q ...

  5. Python Log Viewer

    https://pythonhosted.org/logview/

  6. Cisco Port-Channel 设置(链路聚合--重点)

    Port-Channel 的在实际工作中的主要作用是将两个或多个端口捆绑成为一个虚拟通道. interface Port-channel1 description port(1/0/5-6) swit ...

  7. java如何压缩多个文件到压缩包，并下载到浏览器？

    java压缩多个文件到压缩包,并下载到浏览器   解决方法: 完整的方法如下,很简单,亲试有效,极力推荐. 我是以流作为文件,而不是file,循环把所有pdf文件压缩到pdf.zip压缩包中. 1.前 ...

  8. sed替换 - 含斜杠（\）和Shell变量

    gen_image.bat中的内容如下:   FOTARomPacker.exe -i .\_ini\FOTARomPacker.ini -o .\_Output\a.bin @IF %ERRORLE ...

  9. js往标签下插入标签的方法

    js="document.getElementsByClassName('CodeMirror-line')[0].innerHTML = 'xxxxxx'"dr.execute_ ...

  10. Python 解析式、生成器

    标准库datetime datetime模块 对日期.时间.时间戳的处理 datetime类 类方法 today() 返回本地时区当前时间的datetime对象 now(tz=None) 返回当前时间 ...