canvas 字体自动换行 线条粗细解决1px线条模糊问题

ctx.fillText 自动更换行

fillText Auto-wrap - 锐客网 您的浏览器不支持canvas。
(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); } })();

效果图:
canvas 字体自动换行 线条粗细解决1px线条模糊问题
文章图片

1px线条设置
canvas的线条画法不一样,canvas的每条线都有一条无限细的“中线”,线条的宽度是从中线向两侧延伸的。
如果我们还是从像素点画一条线,那么线条的中线就会靠齐到像素的起点,
然后我们开始画了,问题也就来了:Canvas 的线条以中线向两侧延伸,而不是向某一边延伸
(比如如果只是往单侧延伸,那么我们的问题就不再是问题了)
此时又有个问题:计算机不允许出现小于1px的图形,所以他做了一个折中的事:把这两个像素都绘制了。
所以,如此一来,本来1px的线条,就成了看起来2px宽的线条。
失败的原因找到了:Canvas中的line把中线与像素的起点对齐了,而不是像素的中间点。
总结:以上就是解决1像素宽度的线条带来的模糊,解决办法是在定位的时候平移半个像素就可以。但是:对于宽度较宽的线条,每一半都是像素的整数,所以您需要一个位于像素之间(即(3,1)到(3,5))的路径,而不是像素的中间。
canvas 字体自动换行 线条粗细解决1px线条模糊问题
文章图片

【canvas 字体自动换行 线条粗细解决1px线条模糊问题】字符间距设置
canvas.style.letterSpacing = range.value + 'px';

    推荐阅读