<!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. springMVC_注解方式搭建基础环境

    ---恢复内容开始--- 一.jar包环境,web配置文件和Spring-MVC配置文件的,相关的modelAndview 1.配置DispatcherServlet <servlet>  ...

  2. bind--dns-docker---[nslookup/dig]

    [dig]  https://www.cnblogs.com/apexchu/p/6790241.html [dns resolution and revserse ]https://www.cnbl ...

  3. firewall-cmd命令详解

    https://blog.csdn.net/GMingZhou/article/details/78090963 实例 # 安装firewalld yum install firewalld fire ...

  4. 网络爬虫requests-bs4-re-1

    最近了解了爬虫,嗯--------,有时候会搞得有点头晕. 跟着线上老师实现了两个实例.可以用python下载源代码玩玩,爬淘宝的很刺激,虽然违反了ROBOTS协议. GIT地址

  5. PYNQ系列学习(二)——pynq与zynq对比(一)

    Zynq可扩展处理平台是赛灵思新一代 FPGA的可编程技术的产品系列.与采用嵌入式处理器的FPGA不同,Zynq产品系列的处理系统不仅能在开机时启动,而且还可根据需要配置可编程逻辑.采用这种方法,软件 ...

  6. teraflop级、TFLOPS、TOPS

    FLOPS 每秒浮点运算次数,TFLOPS表示每秒万亿(10^12)次浮点计算: TFLOPS是floating point operations per second 每秒所执行的浮点运算次数. 1 ...

  7. zabbix4.4 （server,proxy,agent）安装部署实战

    一. 部署架构图 二. 安装环境及版本信息 操作系统:centos7 zabbix版本: 4.4 mysql: 5.7.28 三.zabbix server安装(192.168.182.132) rp ...

  8. MHA集群搭建

    (1).简介 MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开 ...

  9. iOS中NSTimer的使用

    1.初始化 + (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelect ...

  10. 123456---com.twoapp.ErTongNongChangPinTu---儿童农场拼图

    com.twoapp.ErTongNongChangPinTu---儿童农场拼图