整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML可以将文档分割为若干段落
段落通过<p>标签定义，注意不要忘记结束标签
THML折行
可以使用如下例子测试
HTML输出-使用提醒
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
家在用canvas绘制文本时，经常会碰到怎么解决文本折行的问题。今天，老K为大家分享一种实现方法。
实现的基本思路:
先将输入的每个字拆分成单个元素，再将这些元素插入到一个隐藏的元素中，该元素宽度和目标canvas的宽度相等，接下来只需要遍历插入容器中的子元素，然后根据子元素相对插入容器的相对距离绘制文字到canvas里。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>canvas-text-wrap</title>
<style type="text/css">
* {
margin: 0
}
#main {
width: 400px;
margin: 20px auto 0;
}
#canvas, #editableWarp, #editable, #hideText {
width: 400px;
height: 125px;
padding: 0;
border: 0;
background: #333;
color: #FFF;
font-size: 14px;
font-family: 'sans-serif';
position: relative;
z-index: 1
}
#hideText {
z-index: 0;
position: absolute;
word-break: break-word;
word-wrap: break-word;
}
p {
line-height: 32px;
}
</style>
</head>
<body>
<div id="main">
<p>
输入：
</p>
<div id="editableWarp">
<div id="hideText"></div>
<textarea id="editable" placeholder="请输入文字..."></textarea>
</div>
<p>
canvas输出：
</p>
</div>
<script type="text/javascript">
function addEvent(obj,type,handle){//封装绑定事件方法
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){ // 早期浏览器
obj['on' + type]=handle;
}
}
};
function getStyle(node, styleType){//获取标签样式方法
return node.currentStyle? node.currentStyle[styleType]: getComputedStyle(node)[styleType];//浏览器中有node.currentStyle方法就用，没有就用另一个
};
var $editable=document.getElementById('editable'),
$hideText=document.getElementById('hideText'),
$main=document.getElementById('main'),
editable_pos=$editable.getBoundingClientRect();
function initCanvasDom(){//创建canvas标签
var $canvas=document.createElement('canvas');
$canvas.innerHTML='您的浏览器不支持canvas';
$canvas.width='400';
$canvas.height='125';
$canvas.id='canvas';
$main.appendChild($canvas);
return $canvas;
}
var $canvas=initCanvasDom();
var ctx=$canvas.getContext('2d');
addEvent($editable,'blur',function(){//绑定方法
var txt=$editable.value,
html=converText(txt);
$hideText.innerHTML='';
$hideText.innerHTML=html;
drawText();
});
function converText(txt) {
var html=txt.replace(/(\S)/ig, '<span>$1</span>');
html=html.replace(/\n|\r/ig,'<br>');
html=html.replace(/\s/ig,' ');
return html;
}
function drawText() {
$main.removeChild($canvas);//删除旧的canvas标签
$canvas=initCanvasDom();//创建新的canvas标签
ctx=$canvas.getContext('2d');
var canvas_width=getStyle($canvas,'width'),
canvas_height=getStyle($canvas,'height');
ctx.clearRect(0,0,canvas_width,canvas_height);
var fontSize=getStyle($hideText,'fontSize');
ctx.font=fontSize + ' sans-serif';
ctx.textAlign='center';
ctx.textBaseline='top';
ctx.fillStyle='#FFFFFF';
var text_span_list=$hideText.getElementsByTagName('span'),
i=0,text_span_list_length=text_span_list.length,pos=null, tex='',item_left=0,item_top=0;
for(;i<text_span_list_length;i++){
pos=text_span_list[i].getBoundingClientRect();
txt=text_span_list[i].innerHTML;
item_left=parseInt(pos.left-editable_pos.left);
item_top=parseInt(pos.top-editable_pos.top);
ctx.fillText(txt,item_left,item_top);
}
}
</script>
</body>
</html>这样基本实现了这个功能。大家可以参考一下代码，自己亲自试一下。为了实现canvas里的文字时时更新，需要动态创建canvas标签，并且每次执行drawText方法时要删掉上一次创建的canvas标签，重新创建一个新的。
本文为原创内容，若转载请注明出处，转发感激不尽。
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
实例
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
HTML基础教程：元素属性标题段落
HTML 段落是通过 <p> 标签进行定义的。
实例
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML 链接是通过 <a> 标签进行定义的。
实例
<a href="http://www.toutiao.com">This is a link</a>
注释：在 href 属性中指定链接的地址。
HTML 图像是通过 <img> 标签进行定义的。
实例
<img src="aaaa.jpg" width="104" height="142" />
<p>This is my first paragraph.</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：This is my first paragraph。
<body> <p>This is my first paragraph.</p> </body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html> <body> <p>This is my first paragraph.</p> </body> </html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例
<p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
实例
<!-- This is a comment -->
注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
提示：合理地使用注释可以对未来的代码编辑工作产生帮助。HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
*请认真填写需求信息，我们会在24小时内与您取得联系。
