<!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. 迭代器Iterator、for循环遍历、泛型

    java.util.Collection接口 是集合的最顶层的接口,定义了集合共性的方法 接口无法直接创建对象,使用多态的方式创建对象 Collection<集合中的数据类型(泛型)> c ...

  2. sonar,jiar,xray,jenkins[cli] [sudoers]

    curl -n -X POST http://52.83.39.59:8080'/job/CLA_SSO/buildWithParameters?token=11d710a8eac8012bea28b ...

  3. django + vue3 解决跨越问题

    django跨域 解决: https://yq.aliyun.com/articles/517215 vue3 跨越(此处没必要,django处理即可): https://blog.csdn.net/ ...

  4. Oracle 中的 Profile

    一.目的: Oracle系统中的profile可以用来对用户所能使用的数据库资源进行限制,使用Create Profile命令创建一个Profile,用它来实现对数据库资源的限制使用,如果把该prof ...

  5. OpenJudge计算概论-买房子

    /*================================================================= 买房子 总时间限制: 1000ms 内存限制: 65536kB ...

  6. Cookie的使用（js-cookie插件）

    js-cookie 官方文档 里面就详细的介绍了es5怎么引用,以下是ES6以上的用户 一.安装 npm install js-cookie --save 二.引用 import Cookies fr ...

  7. 在基于acpi的linux系统上如何检查当前系统是否支持深度睡眠？

    答: 执行以下命令: # dmesg|grep -i acpi |grep -i supports (S3表示支持深度睡眠) ACPI: (supports S0 S1 S3 S4 S5)

  8. osg fbx模型点击节点，对应节点染色

    class CPickHandler :public osgGA::GUIEventHandler { public: CPickHandler(osgViewer::Viewer *viewer) ...

  9. SpringCloud学习成长之 九 服务链路跟踪

    这篇文章主要讲述服务追踪组件zipkin,Spring Cloud Sleuth集成了zipkin组件. 一.简介 Spring Cloud Sleuth 主要功能就是在分布式系统中提供追踪解决方案, ...

  10. 常规函数模块CALL in new task 报错

    使用START NEW TASK, 函数需要是远程调用模块. 错误:FUNCTION module  ' ZMMFM0021'  cannot be used for 'remote' CALLS. ...