Bitmap&&DrawTextEx描绘变色渐变文字

铅笔描绘的思念

前几天提问的本体哈自己瞎糊解决了 是createLinearGradient参数给常数了= =b
其实想要这个效果是因为VX上有描绘有颜色的渐变文字的效果很惊艳的
记得那时候VS开始都很多优质的VX游戏都会加上这个效果 MV有canvas非常简单的糊出来
还有位dalao提醒PIXI.Text也能做出渐变的效果 然后并没有研究出来=。=
就把瞎糊的贴出来好了效果配合全局控制字符调教的好的话其实很棒的。。
全局控制字符的话发现其实网上很多况且我糊的也不怎么样
效果图

JAVASCRIPT 代码复制

//=============================================================================
// Bitmap&DrawTextEx.js
//=============================================================================
(function() {
    Bitmap.prototype._drawTextBody = function(text, tx, ty, maxWidth) {
        this.gradientFillText(text, tx, ty, maxWidth, "#fff", this.textColor)
    };
    Bitmap.prototype.gradientFillText = function(text, x, y, mWidth, color1,
                                                 color2) {
        var context = this._context;
        var grad;
        grad = context.createLinearGradient(x, y-this.fontSize, x, y);
        grad.addColorStop(0, color1);
        grad.addColorStop(0.8, color2);
        context.save();
        context.fillStyle = grad;
        context.fillText(text, x, y, mWidth);
        context.restore();
        this._setDirty();
    };
    var _bitmapDrawTextEx_initialize =Bitmap.prototype.initialize;
    Bitmap.prototype.initialize = function(width,height) {
        _bitmapDrawTextEx_initialize.call(this,width,height)
        this.outlineColor = '#000';
    }
})();

//=============================================================================


// Bitmap&DrawTextEx.js


//=============================================================================


(function() {


    Bitmap.prototype._drawTextBody = function(text, tx, ty, maxWidth) {


        this.gradientFillText(text, tx, ty, maxWidth, "#fff", this.textColor)


    };


    Bitmap.prototype.gradientFillText = function(text, x, y, mWidth, color1,


                                                 color2) {


        var context = this._context;


        var grad;


        grad = context.createLinearGradient(x, y-this.fontSize, x, y);


        grad.addColorStop(0, color1);


        grad.addColorStop(0.8, color2);


        context.save();


        context.fillStyle = grad;


        context.fillText(text, x, y, mWidth);


        context.restore();


        this._setDirty();


    };


    var _bitmapDrawTextEx_initialize =Bitmap.prototype.initialize;


    Bitmap.prototype.initialize = function(width,height) {


        _bitmapDrawTextEx_initialize.call(this,width,height)


        this.outlineColor = '#000';


    }


})();

---

如果不需要修改文字描边不透明的话吧initizlize那段删了就好 color1的话白色效果最好不建议改
addColorStop(0.8, color2) 0.8这个参数我也是试了好多次觉得0.8效果最好

hiten227

感谢楼主分享

超凡入梦

怎么用的大佬给个教程啊