<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title>canvas自动换行</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: pink;
color: blue;
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>
<canvas id=
"canvas"
width=
"400"
height=
"125"
>您的浏览器不支持canvas</canvas>
</div>
<script type=
"text/javascript"
src=
"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"
></script>
<script type=
"text/javascript"
>
var
$canvas = $(
'#canvas'
),
$editable = $(
'#editable'
),
$hideText = $(
'#hideText'
),
ctx = $(canvas)[0].getContext(
"2d"
);
$editable.keyup(
function
handleEdittable () {
var
txt = $editable.val(),
html = convertText(txt);
$hideText.html(html);
drawText();
});
function
convertText(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 () {
ctx.clearRect(0, 0, $(canvas).width(), $(canvas).height());
var
fontSize = $hideText.css(
'fontSize'
);
ctx.font = fontSize +
' sans-serif'
;
ctx.textAlign =
'conter'
;
ctx.textBaseline =
"top"
;
ctx.fillStyle =
'red'
;
$.each($(
"#hideText span"
),
function
(i, item) {
var
pos = $(item).position();
var
txt = $(item).text();
ctx.fillText(txt, pos.left, pos.top);
});
}
</script>
</body>
</html>