不能换行俄语前端h5_HTML5 Canvas fillText填充文字自动换行（支持中英文混合）...

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

function writeTextOnCanvas(cns, lh, rw, text) {

var cns = document.getElementById(cns);

var ctx = cns.getContext("2d");

var lineheight = lh;

var text = text;

ctx.width = cns.width;

ctx.height = cns.height;

ctx.clearRect(0, 0, ctx.width, ctx.height);

ctx.font = "16px 微软雅黑";

ctx.fillStyle = "#f00";

function getTrueLength(str) { //获取字符串的真实长度(字节长度)

var len = str.length,

truelen = 0;

for (var x = 0; x < len; x++) {

if (str.charCodeAt(x) > 128) {

truelen += 2;

} else {

truelen += 1;

}

return truelen;

}

function cutString(str, leng) { //按字节长度截取字符串，返回substr截取位置

var len = str.length,

tlen = len,

nlen = 0;

for (var x = 0; x < len; x++) {

if (str.charCodeAt(x) > 128) {

if (nlen + 2 < leng) {

nlen += 2;

} else {

tlen = x;

break;

}

} else {

if (nlen + 1 < leng) {

nlen += 1;

} else {

tlen = x;

break;

}

return tlen;

}

for (var i = 1; getTrueLength(text) > 0; i++) {

var tl = cutString(text, rw);

ctx.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), 10, i * lineheight + 50);

text = text.substr(tl);

}

writeTextOnCanvas("mycanvas", 22, 40, document.getElementById("input").value);

document.getElementById("input").onkeyup = function() {

writeTextOnCanvas("mycanvas", 22, 40, this.value);

}

})();

不能换行俄语前端h5_HTML5 Canvas fillText填充文字自动换行（支持中英文混合）...相关推荐

不能换行俄语前端h5_H5兼容问题及解决方法
移动端如何定义字体font-family @ --------------------------------------中文字体的英文名称 @ 宋体 SimSun @ 黑体 SimHei @ 微信雅 ...
移动端canvas合成图片，填充文字自动换行
今天用canvas合成带有微信公众号二维码和祝福语的春节贺卡由于代码都是原生的没有引入其他库,所以直接将对应部分贴出来吧. html  <canvas id=& ...
前端实现可绘制的canvas画布_JS前端基于canvas给图片添加水印
前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前端实现 ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
前端可视化——Canvas
Canvas 基本使用 <canvas id="tutorial" width="300" height="300"></ ...
html5 fill,HTML canvas fillText()用法及代码示例
fillText()方法用于在画布上绘制填充的文本.文本的默认颜色是黑色. 用法: context.fillText(text, x, y, maxWidth); 参数: text:此参数指定要在画布 ...
html5 mask,HTML5 Canvas渐进填充与透明实现图像的Mask效果
HTML5 Canvas渐进填充与透明实现图像的Mask效果 2020-03-24 19:10:45 字体:大中小来源:转载供稿:网友详细解释HTML5 Canvas中渐进填充的参数设置与使 ...
Blob如何在html里转换成图片,前端图片canvas，file，blob，DataURL等格式转换
前端图片canvas,file,blob,DataURL等格式转换最近用到一些图片相关的操作,记录一下笔记. 将file转化成base64 场景: 获取到一个file类型的图片,如果直接在html中预 ...
A canvas fillText and strokeText example
A canvas fillText and strokeText example A canvas fillText and strokeText example A canvas fillText ...

不能换行俄语前端h5_HTML5 Canvas fillText填充文字自动换行（支持中英文混合）...

不能换行俄语前端h5_HTML5 Canvas fillText填充文字自动换行（支持中英文混合）...相关推荐

最新文章

热门文章

不能换行 俄语 前端h5_HTML5 Canvas fillText填充文字自动换行（支持中英文混合）...

不能换行 俄语 前端h5_HTML5 Canvas fillText填充文字自动换行（支持中英文混合）...相关推荐

最新文章

热门文章

不能换行俄语前端h5_HTML5 Canvas fillText填充文字自动换行（支持中英文混合）...

不能换行俄语前端h5_HTML5 Canvas fillText填充文字自动换行（支持中英文混合）...相关推荐