<!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. 20191024-6 Alpha发布用户使用报告

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9863 组名:胜利点 组长:贺敬文 组员:彭思雨  杨萍  王志文  位军 ...

  2. 服务器(Linux)上运行python总结

    跑实验换了几次服务器了,每次遇到相似问题都要重新百度,而且每次百度搜索出的顺序都不一样,又得重新找半天,这次把遇到的问题都总结一下. 1.准备 PuTTY和FileZilla FileZilla使用F ...

  3. PyTorch Tutorials 5 数据并行（选读）

    %matplotlib inline 数据并行(选读) Authors: Sung Kim and Jenny Kang 在这个教程里,我们将学习如何使用 DataParallel 来使用多GPU. ...

  4. 如何向Makefile传递参数?

    答: 直接在make命令的后面加上参数,如: make HOST_CFLAGS=-I. 注意事项: HOST_CFLAGS变量将会替换相应Makefile中的HOST_CFLAGS,也就是Makefi ...

  5. C# 读取文件内容

    读取文件内容有三种方式 全部读取到字符串变量中 一次读取一行 全部读取到字符串数组中,每个数组元素存储一行文本 全部读取到字符串变量 string text = System.IO.File.Read ...

  6. Javascript-基本类型

    数字 JavaScript不区分整数和浮点数,所有数字都用浮点数表示. 能够表示最大值是 -253 ~ 253,包含边界.超过范围的数无法保证低位数字的精度. JavaScript能直接识别十进制的整 ...

  7. String,StringBuilder 和StringBuffer区别

    1. String 和字符串缓冲区的区别是: String 是一个不可变的字符序列 , 而字符串缓冲区是可变的 2. StringBuffer 是一个线程安全的可变字符序列 ; 线程安全对应的效率低 ...

  8. javascript中的Error对象

    在javascript中一旦代码解析或运行时发生错误,javascript引擎就会自动产生并抛出一个Error对象的实例,然后整个程序就中断在发生错误的地方. Error对象的实例有三个基本的属性: ...

  9. Qt编写自定义控件38-高亮按钮

    一.前言 高亮按钮控件,既可以作为类似于交通指示灯使用,也可以作为设备状态指示灯使用,控件内置多套颜色风格,还可以自己设置颜色风格,按钮可以增加文字显示,非常适合需要在状态设备上显示小量的文字展示,按 ...

  10. maven:手动上传jar私服

    转:https://www.jianshu.com/p/b8ec688c388e 打包时提示私服中找不到以下jar包 在私服中搜索确实找不到,后来知道这些是老系统的jar包没有deploy到私服 经分 ...