canvas换图时候会闪烁_canvas文本绘制自动换行、字间距、竖排等实现

var canvas &＃61; document.querySelector(&＃39;canvas&＃39;);var context &＃61; canvas.getContext(&＃39;2d&＃39;);context.font &＃61; &＃39;16px sans-serif&＃39;;var width &＃61; canvas.width;var height &＃61; canvas.height;var tempImg &＃61; new Image();tempImg.width &＃61; width;tempImg.height &＃61; height;tempImg.onload &＃61; function () { // 把img绘制在canvas画布上 context.drawImage(this, 0, 0, width, height);};tempImg.src &＃61; &＃39;data:image/svg&＃43;xml;charset&＃61;utf-8,我是一段需要换行的文字啦啦啦&＃39;;此方法优点在于足够简单&＃xff0c;只要一段带style样式的HTML代码即可&＃xff01;唯一不足在于兼容性&＃xff0c;IE浏览器不支持&＃xff0c;最新的Firefox浏览器虽然支持&＃xff0c;但是只能以形式呈现&＃xff0c;无法绘制到canvas画布上(若谁知道原因欢迎不吝赐教)。不过好的是移动端Safari浏览器以及微信浏览器都是支持的&＃xff0c;因此&＃xff0c;此方法理论上是可以在移动端使用的。例如我手机Safari的效果截图&＃xff1a;

三、如何让canvas支持字符间距&＃xff1f;

1. 如果只需要兼容Chrome&＃xff0c;直接letter-spacing控制

canvas { letter-pacing: 5px; }绘制的文字字符间距自动就是5px。如此欣喜的特性有必要亲眼见证一下&＃xff0c;您可以狠狠地点击这里&＃xff1a;canavs文本间距使用CSS letter-spacing实现demo效果如下GIF示意&＃xff1a;完整测试JS代码如下&＃xff1a;

var canvas &＃61; document.querySelector(&＃39;canvas&＃39;);var context &＃61; canvas.getContext(&＃39;2d&＃39;);var range &＃61; document.querySelector(&＃39;input[type&＃61;range]&＃39;);// 绘制方法var draw &＃61; function () { // 清除之前的绘制 context.clearRect(0, 0, canvas.width, canvas.height); // 字符间距设置 canvas.style.letterSpacing &＃61; range.value &＃43; &＃39;px&＃39;; // 并绘制文本&＃xff0c;font属性值设置一定要在这里 context.font &＃61; &＃39;32px sans-serif&＃39;; context.fillText(&＃39;我是一段文本&＃39;, 0, 50);};// 改变字符间距后重绘range.addEventListener(&＃39;change&＃39;, draw);// 一进来根据默认值绘制draw();根据我的观察&＃xff0c;貌似Chrome浏览器在设置font属性值的时候&＃xff0c;把letter-spacing等信息一起算作上下文中了。所以&＃xff0c;虽然看上去context.font &＃61; &＃39;32px sans-serif&＃39;一直都没变&＃xff0c;但却不能放在draw()方法之外&＃xff0c;否则&＃xff0c;还是按照老的letter-spacing渲染而看不到字符间距变化。此方法最简单最容易理解&＃xff0c;只可惜&＃xff0c;根据我的测试&＃xff0c;目前仅Chrome浏览器支持。Firefox以及Safari全都不行。

2. canvas计算与逐字绘制

/*** &＃64;author zhangxinxu(.com)* &＃64;licence MIT* &＃64;description http://www.zhangxinxu.com/wordpress/?p&＃61;7362*/CanvasRenderingContext2D.prototype.letterSpacingText &＃61; function (text, x, y, letterSpacing) { var context &＃61; this; var canvas &＃61; context.canvas; if (!letterSpacing && canvas) { letterSpacing &＃61; parseFloat(window.getComputedStyle(canvas).letterSpacing); } if (!letterSpacing) { return this.fillText(text, x, y); } var arrText &＃61; text.split(&＃39;&＃39;); var align &＃61; context.textAlign || &＃39;left&＃39;; // 这里仅考虑水平排列 var originWidth &＃61; context.measureText(text).width; // 应用letterSpacing占据宽度 var actualWidth &＃61; originWidth &＃43; letterSpacing * (arrText.length - 1); // 根据水平对齐方式确定第一个字符的坐标 if (align &＃61;&＃61; &＃39;center&＃39;) { x &＃61; x - actualWidth / 2; } else if (align &＃61;&＃61; &＃39;right&＃39;) { x &＃61; x - actualWidth; } // 临时修改为文本左对齐 context.textAlign &＃61; &＃39;left&＃39;; // 开始逐字绘制 arrText.forEach(function (letter) { var letterWidth &＃61; context.measureText(letter).width; context.fillText(letter, x, y); // 确定下一个字符的横坐标 x &＃61; x &＃43; letterWidth &＃43; letterSpacing; }); // 对齐方式还原 context.textAlign &＃61; align;};API详细&＃xff1a;

CanvasRenderingContext2D.letterSpacingText(text, x, y, letterSpacing);其中text, x, y3个参数和fillText()方法中的这3个参数含义是一样的&＃xff0c;不赘述。letterSpacing表示字符间距大小&＃xff0c;数值。可缺省&＃xff0c;默认会拿元素在DOM环境下的letter-spacing大小作为计算值。使用示意&＃xff1a;

var canvas &＃61; document.querySelector(&＃39;canvas&＃39;);var context &＃61; canvas.getContext(&＃39;2d&＃39;);context.font &＃61; &＃39;32px sans-serif&＃39;;context.textAlign &＃61; &＃39;center&＃39;;// 字符间隙5pxcontext.letterSpacingText(&＃39;我是一段文本&＃39;, canvas.width / 2, 50, 5);您可以狠狠地点击这里&＃xff1a;canavs字符间距JS逐字计算demo效果如下GIF示意(居中对齐&＃xff0c;截自IE Edge)&＃xff1a;此方法兼容性非常好&＃xff0c;IE9&＃43;浏览器都支持&＃xff0c;PC和Mobile通吃。

3. 借助SVG 直接把CSS效果绘制上去

四、如何让canvas支持竖直排列&＃xff1f;

1. JS混合计算逐字排列

/* &＃64;author zhangxinxu(.com)&＃64;licence MIT&＃64;description http://www.zhangxinxu.com/wordpress/?p&＃61;7362*/CanvasRenderingContext2D.prototype.fillTextVertical &＃61; function (text, x, y) { var context &＃61; this; var canvas &＃61; context.canvas; var arrText &＃61; text.split(&＃39;&＃39;); var arrWidth &＃61; arrText.map(function (letter) { return context.measureText(letter).width;    }); var align &＃61; context.textAlign; var baseline &＃61; context.textBaseline; if (align &＃61;&＃61; &＃39;left&＃39;) { x &＃61; x &＃43; Math.max.apply(null, arrWidth) / 2; } else if (align &＃61;&＃61; &＃39;right&＃39;) { x &＃61; x - Math.max.apply(null, arrWidth) / 2; } if (baseline &＃61;&＃61; &＃39;bottom&＃39; || baseline &＃61;&＃61; &＃39;alphabetic&＃39; || baseline &＃61;&＃61; &＃39;ideographic&＃39;) { y &＃61; y - arrWidth[0] / 2; } else if (baseline &＃61;&＃61; &＃39;top&＃39; || baseline &＃61;&＃61; &＃39;hanging&＃39;) { y &＃61; y &＃43; arrWidth[0] / 2; } context.textAlign &＃61; &＃39;center&＃39;; context.textBaseline &＃61; &＃39;middle&＃39;; // 开始逐字绘制 arrText.forEach(function (letter, index) { // 确定下一个字符的纵坐标位置 var letterWidth &＃61; arrWidth[index]; // 是否需要旋转判断 var code &＃61; letter.charCodeAt(0); if (code <&＃61; 256) { context.translate(x, y); // 英文字符&＃xff0c;旋转90° context.rotate(90 * Math.PI / 180); context.translate(-x, -y); } else if (index > 0 && text.charCodeAt(index - 1) <256) { // y修正 y &＃61; y &＃43; arrWidth[index - 1] / 2; } context.fillText(letter, x, y); // 旋转坐标系还原成初始态 context.setTransform(1, 0, 0, 1, 0, 0); // 确定下一个字符的纵坐标位置 var letterWidth &＃61; arrWidth[index]; y &＃61; y &＃43; letterWidth; }); // 水平垂直对齐方式还原 context.textAlign &＃61; align; context.textBaseline &＃61; baseline;};API名称是fillTextVertical&＃xff0c;语法如下&＃xff1a;

CanvasRenderingContext2D.fillTextVertical(text, x, y)其中text, x, y3个参数和fillText()方法中的这3个参数含义是一样的&＃xff0c;不赘述。实现的效果是&＃xff1a;英文数字等旋转&＃xff0c;中文垂直排列。支持textAlign和textBaseline等基本设置。您可以狠狠地点击这里&＃xff1a;canavs文本竖排JS逐字计算实现demo使用JS如下&＃xff1a;

var canvas &＃61; document.querySelector(&＃39;canvas&＃39;);var context &＃61; canvas.getContext(&＃39;2d&＃39;);context.font &＃61; &＃39;24px STKaiti, sans-serif&＃39;;context.textAlign &＃61; &＃39;center&＃39;;context.textBaseline &＃61; &＃39;top&＃39;;context.fillTextVertical(&＃39;anglebaby和黄晓明&＃39;, canvas.width / 2, 0);结果如下图所示&＃xff1a;

2. 借助SVG 直接把CSS效果绘制上去

五、结束语