<!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. Linux fdisk命令创建扩展分区过程

    [root@localhost ~]# fdisk /dev/sdb …省略部分输出… Command (m for help): n #新建立分区 Command action e extended ...

  2. Alpha冲刺（4/4）

    队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11913386.html 作业博客 :https://edu.cnblogs.com/campus/f ...

  3. c语言复杂申明解释程序

    c语言复杂声明的解释 目标:分析一个将c语言复杂申明解释为英语的一个程序 首先介绍一种简单的读声明的方法,来源网络 1.右左法则 从标识符开始(或者最内层的结构,如果不存在标识符的话,通常出现于函数指 ...

  4. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  5. 在Linux下使用LLVM Clang以及Blocks

    可以从这个链接下载:http://llvm.org/releases/download.html sudo apt-get install llvm sudo apt-get install clan ...

  6. osg 三维模型加载与解析(fbx、3ds、ive、obj、osg)

    void TeslaManage::OnlineTreeViewDoubleClick(const QModelIndex & index) { int row = index.row(); ...

  7. OpenStack社区中的GO语言之争

    1 背景介绍 Swift之前几乎所有的代码都是用Python实现的,但是性能一直不理想, 社区为了解决性能问题,尝试过很多方法,后来发现用Golang语言进行一部分代码重写, 性能得到了一定的提升,社 ...

  8. Django中的文件上传和原生Ajax

    概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...

  9. springboot下jar包方式运行Caused by: java.lang.ExceptionInInitializerError: null

    idea调试过程中不会出现此问题,异常如下 org.springframework.beans.factory.BeanCreationException: Error creating bean w ...

  10. Hive实现WordCount详解

    一.WordCount原理 初学MapReduce编程,WordCount作为入门经典,类似于初学编程时的Hello World.WordCount的逻辑就是给定一个/多个文本,统计出文本中每次单词/ ...