canvas绘制文本自动换行
<!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绘制文本自动换行的更多相关文章
- canvas绘制文本
canvas绘制文本 属性和方法 font = value 设置字体 textAlign = value 设置字体对齐方式 start, end, left, right, center textBa ...
- canvas 绘制文本
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5 canvas绘制文本
demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...
- canvas文本自动换行
在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行,要进行截断另起一行来写.在此参考文章html5-canvas的绘制文本自动换行来做改写. 根据canvas宽度来做折行 在此根据 ...
- FontMetrics ----- 绘制文本，获取文本高度
Canvas 绘制文本时,使用FontMetrics对象,计算位置的坐标. public static class FontMetrics { /** * The maximum distance a ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- html5 canvas 笔记三（绘制文本和图片）
绘制文本 fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...
- Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...
- 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...
随机推荐
- 手写实现RPC框架（不带注册中心和带注册中心两种）
实现自己的RPC框架如果不需要自定义协议的话那就要基于Socket+序列化. ProcessorHandler:主要是用来处理客户端的请求. package dgb.nospring.myrpc; i ...
- thymeleaf 声明
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd&qu ...
- Cesium中的坐标系及转换
在我们开始学习Entity之前,我们首先需要先学习下Cesium中的坐标系,Cesium中有多个坐标系,在进行添加Entity时经常会使用到. 一.坐标系介绍 我们先来列举下Cesium中的坐标系:W ...
- window.postMessage 跨窗口，跨iframe javascript 通信
同源通信 执行它们的页面位于具有相同的协议(http/https),端口(80/443),主机(通常为域名) 时,这两个脚本才能相互通信 大多数情况下,网站就是内部的域名,所以是同源通信,可以相互访问 ...
- redis之为什么redis是单线程？
官方FAQ表示,因为Redis是基于内存的操作,CPU不是Redis的瓶颈,Redis的瓶颈最有可能是机器内存的大小或者网络带宽.既然单线程容易实现,而且CPU不会成为瓶颈,那就顺理成章地采用单线程的 ...
- Spring Bootz之热部署
在项目的pom.xml文件添加如下两段 <dependency> <groupId>org.springframework.boot</groupId> <a ...
- osg 线程模型
void ViewerBase::frame(double simulationTime) { if (_done) return; // OSG_NOTICE<<std::endl< ...
- 算法习题---4-6莫尔斯电码（UVa508）
一:题目 A-Z0-9分别对应一些莫尔斯电码字符串 A .- B -... C -.-. D -.. E . F ..-. G --. H .... I .. J .--- K -.- L .-.. ...
- 使用注解注入properties中的值的简单示例
spring使用注解注入properties中的值的简单示例 1.在web项目的src目录下新建setting.properties的文件,内容如下: version=1 2.在spring的xm ...
- 【创业】2B创业历程
http://www.woshipm.com/chuangye/2800111.html http://www.woshipm.com/chuangye/2803240.html http://www ...