微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JS Canvas - 带有 FadeIn 的模糊文本移动

如何解决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 举报,一经查实,本站将立刻删除。