canvas 字体自动换行 线条粗细解决1px线条模糊问题
ctx.fillText 自动更换行
fillText Auto-wrap - 锐客网
(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);
}
})();
效果图:
文章图片
1px线条设置
canvas的线条画法不一样,canvas的每条线都有一条无限细的“中线”,线条的宽度是从中线向两侧延伸的。
如果我们还是从像素点画一条线,那么线条的中线就会靠齐到像素的起点,
然后我们开始画了,问题也就来了:Canvas 的线条以中线向两侧延伸,而不是向某一边延伸
(比如如果只是往单侧延伸,那么我们的问题就不再是问题了)
此时又有个问题:计算机不允许出现小于1px的图形,所以他做了一个折中的事:把这两个像素都绘制了。
所以,如此一来,本来1px的线条,就成了看起来2px宽的线条。
失败的原因找到了:Canvas中的line把中线与像素的起点对齐了,而不是像素的中间点。
总结:以上就是解决1像素宽度的线条带来的模糊,解决办法是在定位的时候平移半个像素就可以。但是:对于宽度较宽的线条,每一半都是像素的整数,所以您需要一个位于像素之间(即(3,1)到(3,5))的路径,而不是像素的中间。
文章图片
【canvas 字体自动换行 线条粗细解决1px线条模糊问题】字符间距设置
canvas.style.letterSpacing = range.value + 'px';
推荐阅读
- python学习之|python学习之 实现QQ自动发送消息
- 使用composer自动加载类文件
- 人脸识别|【人脸识别系列】| 实现自动化妆
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- canvas(一)基本用法
- iOS富文本为html时,修改默认字体颜色
- win7删除新建不自动刷新
- 浅析(成人情趣用品智能无人自动售货机是新零售的下一个风口吗())
- Java代码辅助效率工具Lombok(注解|Java代码辅助效率工具Lombok(注解,自动生成代码)
- vue|vue canvas 手绘进度条动画