如何解决JS Canvas - 带有 FadeIn 的模糊文本移动
我正在尝试为画布创建一个文本淡入函数,但下面函数中的迭代会导致文本模糊(和剪切)。
疑难解答注释
我已经尝试了以下所有方法,但得到了相同的结果:
-
使用 setInterval 和 setTimeout 代替 requestAnimationFrame:
-
各种“dpr fixes”。
-
parseInt fix 用于 textPosX 和 textPosY 参数。
-
硬编码 rgb 值。
在上述所有情况下,文本都是模糊的,字符的底部被略微剪裁。
但是,当我将fadeInAlpha 设置为100(强制执行单次迭代)时,文本显示清晰,所以我很确定问题出在迭代上——不知何故,我无法在完全相同的位置多次绘制文本次。
function drawBlockLinesItem ( textLine,textPosX,textPosY ) {
let fadeInAlpha = 0;
window.requestAnimationFrame ( () => fadeIn ( fadeInAlpha ) );
function fadeIn ( fadeInAlpha ) {
fadeInAlpha ++;
ctxLayerText.strokeStyle = "rgb(" +
textstrokeStyleRGB.r + "," + textstrokeStyleRGB.g + "," + textstrokeStyleRGB.b + "," + fadeInAlpha / 100 + ")"
ctxLayerText.fillStyle = "rgb(" +
textFillStyleRGB.r + "," + textFillStyleRGB.g + "," + textFillStyleRGB.b + "," + fadeInAlpha / 100 + ")"
if ( canvasLayerText.width < canvasMinWidthOverride ) {
ctxLayerText.fillText ( textLine,textPosY );
} else {
ctxLayerText.strokeText ( textLine,textPosY );
}
console.log ( "item - " + textValue.substr ( 0,20 ) + " - draw - " + fadeInAlpha );
if ( fadeInAlpha < 100 ) {
window.requestAnimationFrame ( () => fadeIn ( fadeInAlpha ) );
}
}
}
解决方法
结果 - rgb 参数中的双引号不起作用 - 或者至少,它们似乎与文本渲染无关:
导致文字模糊:
ctxLayerText.fillStyle = "rgb(" +
textFillStyleRGB.r + "," + textFillStyleRGB.g + "," + textFillStyleRGB.b + "," + fadeInAlpha / 100 + ")"
文本显示正常:
ctxLayerText.fillStyle = ‘rgb(‘ +
textFillStyleRGB.r + ‘,’ + textFillStyleRGB.g + ‘,’ + textFillStyleRGB.b + ‘,’ + fadeInAlpha / 100 + ‘)’
评论 已经发布了许多其他“dpr”调整例程 - IMO,它们所做的只是调整画布高度和宽度,但它们不会改变文本渲染:
function initHDPCanvas02 ( canvas,w,h,ratio ) {
let ctx = canvas.getContext ( '2d' );
if ( ! ratio ) {
ratio = calcDevicePixelRatio ( ctx );
}
canvas.width = w * ratio;
canvas.height = h * ratio;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
ctx.setTransform ( ratio,ratio,0 );
return ctx;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。