Project1

标题: fillText渐变的问题 [打印本页]

作者: 铅笔描绘的思念 时间: 2017-6-8 17:41
标题: fillText渐变的问题

想改写下bitmap drawText使得文字有渐变效果

想着有canvas应该是分分钟的事情

但是并没有想到并没有那么简单

因为并不是每次调用drawText都只有一个context

所以超过createLinearGradient的高度就是只有color2了
然后就是下面这个效果

所以有没有大佬帮忙解决下

JAVASCRIPT 代码复制

Bitmap.prototype._drawTextBody = function(text, tx, ty, maxWidth) {
 
        var context = this._context;
        var gradient= context.createLinearGradient(0, 0, 0, 32);
        gradient.addColorStop(0, "#fff");
        gradient.addColorStop(0.6, this.textColor);
 
        context.save();
        context.fillStyle = gradient;
        context.fillText(text, tx, ty, maxWidth);
        context.restore();
        this._setDirty();
    };

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


 


        var context = this._context;


        var gradient= context.createLinearGradient(0, 0, 0, 32);


        gradient.addColorStop(0, "#fff");


        gradient.addColorStop(0.6, this.textColor);


 


        context.save();


        context.fillStyle = gradient;


        context.fillText(text, tx, ty, maxWidth);


        context.restore();


        this._setDirty();


    };

作者: 铅笔描绘的思念 时间: 2017-6-9 22:07
本帖最后由铅笔描绘的思念于 2017-6-10 22:23 编辑

本来是糊一个drawText加强的看起来这个渐变色没解决搞不下去了qaq

神tm自己仿gradientFillRect写了方法然后在draw里调用就成功了。。。还是得研究下什么原理

欢迎光临 Project1 (https://rpg.blue/)