画布-图像不透明度循环（淡入）

debugcn 发表于 Dev

罗西滕

伙计们。这是一些应该可以的代码，尽管它不起作用...嘿...非常典型=）

function xxx() {

    var txtCanvas = document.getElementById('text');
    var textOne = txtCanvas.getContext('2d');
    var alpha = 0.5;
    textOne.globalAlpha = alpha;
    // loading image
    var img = new Image();
    img.src = "http://tvangeste.com/gallery/selani/tv4_2.jpg"
    img.onload = function () {
        textOne.drawImage(img, 0, 0);

    }
    //end of image loader

    if (alpha < 1) 
    {
      alpha += 0.1;

   }



}    
requestAnimationFrame(xxx);

这是小提琴，以展示它是如何工作的... http://jsfiddle.net/gLs1owd6/

该脚本应该做一件简单的事情-使图像褪色。有什么建议？谢谢！

用户名

您需要一个循环才能以不同的不透明度级别重新绘制图像。对于循环，您需要的东西不会阻塞UI，也不会在每次监视器更新时刷新，因此，请使用requestAnimationFrame进行救援。

这是解决此问题的一种方法：

var img = new Image();
img.onload = function () {

    // when image has loaded we can use it.
    // this is a self-invoking function used to fade in the image
    (function loop() {
        // we can update the property directly
        textOne.globalAlpha += 0.01;

        // as we have opacity involved we need to clear the canvas each time
        textOne.clearRect(0, 0, txtCanvas.width, txtCanvas.height);

        // redraw the image
        textOne.drawImage(img, 0, 0);

        // if not full opacity, loop (canvas will clamp the value for us)
        if (textOne.globalAlpha < 1.0) {
            requestAnimationFrame(loop);    
        }
        else {
            // when done, call the next step from here...
        }
    })();

}

// set source as last step for image loading
img.src = "http://tvangeste.com/gallery/selani/tv4_2.jpg"

改良的小提琴

希望这可以帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。