web前端|H5教程
canvas,文字换行
web前端-H5教程
html5中的canvas是用于绘制图形的，可以通过 JavaScript 来控制它绘制各种文本和图像，但是在使用 canvas 绘制文字的时候，我们可能想要让这些文字在某处按要求换行，这该如何实现呢？本篇文章将来给大家介绍关于canvas文字换行的方法，话不多说，下面我们来一起看看具体的内容。
php在线云课堂源码,ubuntu找不到make,爬虫输出成excel,可以用的娱乐网源码PHP,seo点击网站lzw
在canvas中提供了将文本作为图片输出到画布上的功能，通常用到的函数主要有canvas.drawText 和canvas.fillText两个。
仿网易云课堂app源码,ubuntu查询gpu数,视频爬虫怎么用,php过滤加号,joo hee seolzw
以canvas.fillText()函数为例，在canvas.fillText(“information” , width , height , maxwidth )中包含四个参数，”information”表示文本输出的内容，width和height分别表示你想要输出的文本起始字符左上角的位置，而maxwidth则表示了该字符串的最大宽度，例如将maxwidth设为100，则无论字符串有多长，都将限制在100像素宽度内。
局域网影视源码,ubuntu怎么调出键盘,爬虫header是什么,xtends php,陈工seolzw
接下来我们来看一看将canvas文字换行的代码：
输入：
canvas输出：
您的浏览器不支持canvas
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, $1);html = html.replace(/\n|\r/ig,
);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 = ed;$.each($("#hideText span"), function (i, item) { var pos = $(item).position(); var txt = $(item).text(); ctx.fillText(txt, pos.left, pos.top);}); }
canvas换行效果如下：
本篇文章到这里就结束了，关于canvas元素更多的知识可以参考HTML5开发手册学习具体内容。
