diff --git a/_docs/api.md b/_docs/api.md
index 6c1968a5..9fd58bfe 100644
--- a/_docs/api.md
+++ b/_docs/api.md
@@ -1537,6 +1537,9 @@ floorId: 地图id，不填视为当前地图
 showDisable: 隐藏点是否不返回null，true表示不返回null
 返回值：图块类型，即“地形、四帧动画、矮敌人、高敌人、道具、矮npc、高npc、自动元件、额外地形”之一
 
+getBlockFilter: fn(x: number, y: number, floorId?: string, showDisable?: bool) -> ?
+获得某个点的图块特效
+
 getBlockId: fn(x: number, y: number, floorId?: string, showDisable?: bool) -> string
 判定某个点的图块id
 例如：if(core.getBlockId(x1, y1) != 'greenSlime' && core.getBlockId(x2, y2) != 'redSlime') core.openDoor(x3, y3); // 一个简单的机关门事件，打败或炸掉这一对绿头怪和红头怪就开门
@@ -1727,6 +1730,9 @@ x: 横坐标
 y: 纵坐标
 floorId: 地图id，不填视为当前地图
 
+setBlockFilter: fn(filter?: ?, x?: number, y?: number, floorId?: string)
+设置某个点图块的特效
+
 setBlockOpacity: fn(opacity?: number, x?: number, y?: number, floorId?: string)
 设置某个点图块的不透明度
 
@@ -1956,6 +1962,9 @@ setFillStyle: fn(name: string|CanvasRenderingContext2D, style: string)
 设置某个canvas的绘制属性（如颜色等）
 参考资料：https://www.w3school.com.cn/tags/canvas_fillstyle.asp
 
+setFilter: fn(name: string|CanvasRenderingContext2D, filter: any)
+设置某个canvas接下来绘制的filter
+
 setFont: fn(name: string|CanvasRenderingContext2D, font: string)
 设置某个canvas的文字字体
 参考资料：https://www.w3school.com.cn/tags/canvas_font.asp
diff --git a/_server/CodeMirror/defs.js b/_server/CodeMirror/defs.js
index 2cd13ce2..fc944a0f 100644
--- a/_server/CodeMirror/defs.js
+++ b/_server/CodeMirror/defs.js
@@ -3165,6 +3165,10 @@ var terndefs_f6783a0a_522d_417e_8407_94c67b692e50 = [
           "!doc": "设置某个点图块的不透明度",
           "!type": "fn(opacity?: number, x?: number, y?: number, floorId?: string)"
         },
+        "setBlockFilter": {
+          "!doc": "设置某个点图块的特效",
+          "!type": "fn(filter?: ?, x?: number, y?: number, floorId?: string)"
+        },
         "decompressMap": {
           "!doc": "解压缩地图", 
           "!type": "fn(mapArr: [[number]], floorId?: string) -> [[number]]"
@@ -3237,6 +3241,10 @@ var terndefs_f6783a0a_522d_417e_8407_94c67b692e50 = [
           "!doc": "获得某个点图块的不透明度",
           "!type": "fn(x?: number, y?: number, floorId?: string, showDisable?: bool) -> number"
         },
+        "getBlockFilter": {
+          "!doc": "获得某个点图块的特效",
+          "!type": "fn(x?: number, y?: number, floorId?: string, showDisable?: bool) -> ?"
+        },
         "loadFloor": {
           "!doc": "从文件或存档中加载某个楼层", 
           "!type": "fn(floorId?: string, map?: ?)"
@@ -3478,6 +3486,10 @@ var terndefs_f6783a0a_522d_417e_8407_94c67b692e50 = [
           "!url": "https://www.w3school.com.cn/tags/canvas_globalalpha.asp",
           "!type": "fn(name: string|CanvasRenderingContext2D, alpha: number) -> number"
         }, 
+        "setFilter": {
+          "!doc": "设置某个canvas接下来绘制的filter",
+          "!type": "fn(name: string|CanvasRenderingContext2D, style: string)"
+        },
         "setLineWidth": {
           "!doc": "设置某个canvas的线宽度", 
           "!url": "https://www.w3school.com.cn/tags/canvas_linewidth.asp",
diff --git a/_server/MotaAction.g4 b/_server/MotaAction.g4
index bd662c1d..d5c24ddb 100644
--- a/_server/MotaAction.g4
+++ b/_server/MotaAction.g4
@@ -42,24 +42,36 @@ return code;
 
 //事件 事件编辑器入口之一
 event_m
-    :   '事件' BGNL? Newline '覆盖触发器' Bool '启用' Bool '通行状态' B_0_List '显伤' Bool '不透明度' Number BGNL? Newline action+ BEND
+    :   '事件' BGNL? Newline '覆盖触发器' Bool '启用' Bool '通行状态' B_0_List '显伤' Bool '不透明度' Number BGNL? Newline '该点特效' '虚化' Number '色相' Int '灰度' Number '反色' Bool '阴影' Number BGNL? Newline action+ BEND
     
 
 /* event_m
 tooltip : 编辑魔塔的事件
 helpUrl : /_docs/#/instruction
-default : [false,true,null,true,1.0,null]
+default : [false,true,null,true,1,0,0,0,false,0,null]
 B_0_List_0=eval(B_0_List_0);
 if (Number_0 < 0 || Number_0 > 1) throw '不透明度需要在0~1之间';
+if (Number_1 < 0) throw '虚化不得小于0；0为完全没有虚化';
+if (Int_0 < 0 || Int_0 >= 360) throw '色相需要在0~359之间';
+if (Number_2 < 0 || Number_2 > 1) throw '灰度需要在0~1之间';
+if (Number_3 < 0) throw '阴影不得小于0；0为完全没有阴影';
 var code = {
     'trigger': Bool_0?'action':null,
     'enable': Bool_1,
     'noPass': B_0_List_0,
     'displayDamage': Bool_2,
     'opacity': Number_0,
+    'filter': {
+        'blur': Number_1,
+        'hue': Int_0,
+        'grayscale': Number_2,
+        'invert': Bool_3,
+        'shadow': Number_3
+    },
     'data': 'data_asdfefw'
 }
-if (!Bool_0 && Bool_1 && (B_0_List_0===null) && Bool_2 && Number_0 == 1.0) code = 'data_asdfefw';
+if (!Bool_0 && Bool_1 && B_0_List_0===null && Bool_2 && Number_0==1.0 && Number_1==0 && Int_0==0 && Number_2==0 && !Bool_3 && Number_3==0) 
+    code = 'data_asdfefw';
 code=JSON.stringify(code,null,2).split('"data_asdfefw"').join('[\n'+action_0+']\n');
 return code;
 */;
@@ -763,6 +775,7 @@ action
     |   show_s
     |   hide_s
     |   setBlockOpacity_s
+    |   setBlockFilter_s
     |   trigger_s
     |   insert_1_s
     |   insert_2_s
@@ -1407,6 +1420,44 @@ var code = '{"type": "setBlockOpacity"'+floorstr+IdString_0+', "opacity": '+Numb
 return code;
 */;
 
+setBlockFilter_s
+    :   '设置图块特效' 'x' EvalString? ',' 'y' EvalString? '楼层' IdString? '虚化' Number '色相' Int '灰度' Number '反色' Bool '阴影' Number Newline
+    
+
+/* setBlockFilter_s
+tooltip : setBlockFilter: 设置图块特效
+helpUrl : /_docs/#/instruction
+default : ["","","",0,0,0,false,0]
+selectPoint : ["EvalString_0", "EvalString_1", "IdString_0"]
+allFloorIds : ['IdString_0']
+colour : this.mapColor
+var floorstr = '';
+if (EvalString_0 && EvalString_1) {
+  var pattern1 = MotaActionFunctions.pattern.id;
+  if(pattern1.test(EvalString_0) || pattern1.test(EvalString_1)){
+    EvalString_0=MotaActionFunctions.PosString_pre(EvalString_0);
+    EvalString_1=MotaActionFunctions.PosString_pre(EvalString_1);
+    EvalString_0=[EvalString_0,EvalString_1]
+  } else {
+    var pattern2 = /^([+-]?\d+)(,[+-]?\d+)*$/;
+    if(!pattern2.test(EvalString_0) || !pattern2.test(EvalString_1))throw new Error('坐标格式错误,请右键点击帮助查看格式');
+    EvalString_0=EvalString_0.split(',');
+    EvalString_1=EvalString_1.split(',');
+    if(EvalString_0.length!==EvalString_1.length)throw new Error('坐标格式错误,请右键点击帮助查看格式');
+    for(var ii=0;ii<EvalString_0.length;ii++)EvalString_0[ii]='['+EvalString_0[ii]+','+EvalString_1[ii]+']';
+  }
+  floorstr = ', "loc": ['+EvalString_0.join(',')+']';
+}
+if (Number_0 < 0) throw '虚化不得小于0；0为完全没有虚化';
+if (Int_0 < 0 || Int_0 >= 360) throw '色相需要在0~359之间';
+if (Number_1 < 0 || Number_1 > 1) throw '灰度需要在0~1之间';
+if (Number_2 < 0) throw '阴影不得小于0；0为完全没有阴影';
+
+var code = '{"type": "setBlockFilter"'+floorstr+IdString_0+', "blur": '+Number_0+', "hue": '+Int_0+', "grayscale": '+Number_1+', "invert": '+Bool_0+', "shadow": '+Number_2+'},\n';
+return code;
+*/;
+
+
 trigger_s
     :   '触发系统事件' 'x' PosString? ',' 'y' PosString? Newline
     
diff --git a/_server/MotaActionParser.js b/_server/MotaActionParser.js
index df120334..da116d1b 100644
--- a/_server/MotaActionParser.js
+++ b/_server/MotaActionParser.js
@@ -8,8 +8,10 @@ ActionParser.prototype.parse = function (obj,type) {
       if(!obj)obj={};
       if(typeof(obj)===typeof('')) obj={'data':[obj]};
       if(obj instanceof Array) obj={'data':obj};
+      if (!obj.filter) obj.filter={};
       return MotaActionBlocks['event_m'].xmlText([
-        obj.trigger==='action',obj.enable,obj.noPass,obj.displayDamage,obj.opacity,this.parseList(obj.data)
+        obj.trigger==='action',obj.enable,obj.noPass,obj.displayDamage,obj.opacity,
+          obj.filter.blur,obj.filter.hue,obj.filter.grayscale,obj.filter.invert,obj.filter.shadow,this.parseList(obj.data)
       ]);
     
     case 'autoEvent':
@@ -364,6 +366,18 @@ ActionParser.prototype.parseAction = function() {
       this.next = MotaActionBlocks['setBlockOpacity_s'].xmlText([
         x_str.join(','),y_str.join(','),data.floorId||'',data.opacity,data.time,data.async||false,this.next]);
       break;
+    case "setBlockFilter": // 设置图块不透明度
+      data.loc=data.loc||[];
+      if (!(data.loc[0] instanceof Array))
+        data.loc = [data.loc];
+      var x_str=[],y_str=[];
+      data.loc.forEach(function (t) {
+        x_str.push(t[0]);
+        y_str.push(t[1]);
+      })
+      this.next = MotaActionBlocks['setBlockFilter_s'].xmlText([
+        x_str.join(','),y_str.join(','),data.floorId||'',data.blur,data.hue,data.grayscale,data.invert||false,data.shadow,this.next]);
+      break;
     case "turnBlock": // 事件转向
       data.loc=data.loc||[];
       if (!(data.loc[0] instanceof Array))
diff --git a/_server/editor_blocklyconfig.js b/_server/editor_blocklyconfig.js
index 329bdd72..fada7272 100644
--- a/_server/editor_blocklyconfig.js
+++ b/_server/editor_blocklyconfig.js
@@ -154,6 +154,7 @@ editor_blocklyconfig=(function(){
       MotaActionBlocks['hide_s'].xmlText(),
       MotaActionBlocks['setBlock_s'].xmlText(),
       MotaActionBlocks['setBlockOpacity_s'].xmlText(),
+      MotaActionBlocks['setBlockFilter_s'].xmlText(),
       MotaActionBlocks['turnBlock_s'].xmlText(),
       MotaActionBlocks['moveHero_s'].xmlText(),
       MotaActionBlocks['move_s'].xmlText(),
diff --git a/libs/events.js b/libs/events.js
index d79f0cd3..b6ed4bdd 100644
--- a/libs/events.js
+++ b/libs/events.js
@@ -1402,6 +1402,14 @@ events.prototype._action_setBlockOpacity = function (data, x, y, prefix) {
     }
 }
 
+events.prototype._action_setBlockFilter = function (data, x, y, prefix) {
+    data.loc = this.__action_getLoc2D(data.loc, x, y, prefix);
+    data.loc.forEach(function (t) {
+        core.setBlockFilter(data, t[0], t[1], data.floorId);
+    });
+    core.doAction();
+}
+
 events.prototype._action_turnBlock = function (data, x, y, prefix) {
     data.loc = this.__action_getLoc2D(data.loc, x, y, prefix);
     data.loc.forEach(function (t) {
@@ -2833,7 +2841,7 @@ events.prototype.setEnemy = function (id, name, value, operator, prefix) {
     }
     var enemyInfo = core.getFlag('enemyInfo');
     if (!enemyInfo[id]) enemyInfo[id] = {};
-    if (typeof value === 'string' && name == 'name') value = value.replaceAll('\r', '\\r');
+    if (typeof value === 'string' && name == 'name') value = value.replace(/\r/g, '\\r');
     value = this._updateValueByOperator(core.calValue(value, prefix), (core.material.enemys[id]||{})[name], operator);
     enemyInfo[id][name] = value;
     (core.material.enemys[id]||{})[name] = core.clone(value);
@@ -2848,7 +2856,7 @@ events.prototype.setEnemyOnPoint = function (x, y, floorId, name, value, operato
     if (block.event.cls.indexOf('enemy') != 0) return;
     var enemy = core.material.enemys[block.event.id];
     if (enemy == null) return;
-    if (typeof value === 'string' && name == 'name') value = value.replaceAll('\r', '\\r');
+    if (typeof value === 'string' && name == 'name') value = value.replaceAll(/\r/g, '\\r');
     value = this._updateValueByOperator(core.calValue(value, prefix), enemy[name], operator);
     flags.enemyOnPoint = flags.enemyOnPoint || {};
     flags.enemyOnPoint[floorId] = flags.enemyOnPoint[floorId] || {}; 
diff --git a/libs/maps.js b/libs/maps.js
index d70c39c9..e8585c31 100644
--- a/libs/maps.js
+++ b/libs/maps.js
@@ -135,7 +135,13 @@ maps.prototype.extractBlocksForUI = function (map, flags) {
                 var event = (floor.events || {})[j + "," + i];
                 if (event != null && event.opacity != null) opacity = event.opacity;
             }
-            map.blocks.push(Object.assign({}, this.getBlockByNumber(number), {x: j, y: i, opacity: opacity}));
+            var filter = this._getBlockFilterFromFlag(floorId, j, i, flags);
+            if (filter == null) {
+                // 检查初始filter
+                var event = (floor.events || {})[j + "," + i];
+                if (event != null && event.filter != null) filter = core.clone(event.filter);
+            }
+            map.blocks.push(Object.assign({}, this.getBlockByNumber(number), {x: j, y: i, opacity: opacity, filter: filter}));
         }
     }
 }
@@ -184,13 +190,16 @@ maps.prototype.getIdOfThis = function (id) {
 maps.prototype.initBlock = function (x, y, id, addInfo, eventFloor) {
     var disable = null;
     var opacity = null;
+    var filter = null;
     if (eventFloor != null) {
         disable = this.isMapBlockDisabled(eventFloor.floorId, x, y);
         opacity = this._getBlockOpacityFromFlag(eventFloor.floorId, x, y);
+        filter = this._getBlockFilterFromFlag(eventFloor.floorId, x, y);
     }
     var block = {'x': x, 'y': y, 'id': id};
     if (disable != null) block.disable = disable;
     if (opacity != null) block.opacity = opacity;
+    if (filter != null) block.filter = filter;
 
     if (id == 17) block.event = {"cls": "terrains", "id": "airwall", "cannotIn":["up", "down", "left", "right"]};
     else if (id in this.blocksInfo) block.event = JSON.parse(JSON.stringify(this.blocksInfo[id]));
@@ -252,13 +261,16 @@ maps.prototype._addEvent = function (block, x, y, event) {
     if (block.opacity == null && event.opacity != null) {
         block.opacity = event.opacity;
     }
+    if (block.filter == null && event.filter != null) {
+        block.filter = core.clone(event.filter);
+    }
     // 覆盖animate
     if (event.animate === false) {
         block.event.animate = 1;
     }
     // 覆盖所有属性
     for (var key in event) {
-        if (key != "enable" && key != "animate" && event[key] != null) {
+        if (key != "enable" && key != "animate" && key != "opacity" && key != "filter" && event[key] != null) {
             block.event[key] = core.clone(event[key]);
         }
     }
@@ -329,6 +341,17 @@ maps.prototype._getBlockOpacityFromFlag = function (floorId, x, y, flags) {
     return (__opacity__[floorId]||{})[index];
 }
 
+maps.prototype._getBlockFilterFromFlag = function (floorId, x, y, flags) {
+    if (flags == null) flags = (core.status.hero || {}).flags;
+    if (flags == null) return null;
+    var __filter__ = flags.__filter__ || {};
+    floorId = floorId || core.status.floorId;
+    if (!floorId) return null;
+    if ((flags.__removed__ || []).indexOf(floorId) >= 0) return null;
+    var index = x + y * core.floors[floorId].width;
+    return core.clone((__filter__[floorId]||{})[index]);
+}
+
 ////// 设置某个点的不透明度 //////
 maps.prototype.setBlockOpacity = function (opacity, x, y, floorId) {
     if (window.flags == null) return;
@@ -357,6 +380,37 @@ maps.prototype.setBlockOpacity = function (opacity, x, y, floorId) {
     }
 }
 
+maps.prototype.setBlockFilter = function (filter, x, y, floorId) {
+    if (window.flags == null) return;
+    floorId = floorId || core.status.floorId;
+    if (!floorId) return;
+    if (!window.flags.__filter__) window.flags.__filter__ = {};
+    if ((window.flags.__removed__ || []).indexOf(floorId) >= 0) return;
+    var index = x + y * core.floors[floorId].width;
+    var __filter__ = window.flags.__filter__;
+    if (!__filter__[floorId]) __filter__[floorId] = {};
+    if (filter == null) delete __filter__[floorId][index];
+    else {
+        if (!filter.blur && !filter.hue && !filter.shadow && !filter.grayscale && !filter.invert)
+            delete __filter__[floorId][index];
+        else __filter__[floorId][index] = core.clone(filter);
+    }
+
+    ////// 重绘该点图块
+    var block = core.getBlock(x, y, floorId, true);
+    if (block != null) {
+        block.filter = core.clone(filter);
+        if (floorId == core.status.floorId && !block.disable) {
+            if (block.event.cls == 'autotile') {
+                core.drawMap();
+            } else {
+                core.drawBlock(block);
+                core.addGlobalAnimate(block);
+            }
+        }
+    }
+}
+
 ////// 某个点图块是否被强制启用或禁用
 maps.prototype.isMapBlockDisabled = function (floorId, x, y, flags) {
     if (flags == null) flags = (core.status.hero || {}).flags;
@@ -908,6 +962,7 @@ maps.prototype.drawBlock = function (block, animate, ctx) {
     if (blockInfo == null) return;
     if (blockInfo.cls != 'tileset') blockInfo.posX = animate % block.event.animate;
     blockInfo.opacity = block.opacity;
+    blockInfo.filter = block.filter;
     if (!block.name)
         this._drawBlockInfo(blockInfo, block.x, block.y, ctx);
     else
@@ -922,14 +977,18 @@ maps.prototype._drawBlockInfo = function (blockInfo, x, y, ctx) {
 
     var alpha = null;
     if (blockInfo.opacity != null) alpha = core.setAlpha(ctx, blockInfo.opacity);
+    core.setFilter(ctx, blockInfo.filter);
     core.clearMap(ctx, px, py, 32, 32);
     core.drawImage(ctx, image, posX * 32, posY * height + height - 32, 32, 32, px, py, 32, 32);
+    core.setFilter(ctx, null);
     if (alpha != null) core.setAlpha(ctx, alpha);
     if (height > 32) {
         alpha = null;
         if (blockInfo.opacity != null) alpha = core.setAlpha('event2', blockInfo.opacity);
+        core.setFilter('event2', blockInfo.filter);
         core.clearMap('event2', px, py + 32 - height, 32, height - 32)
         core.drawImage('event2', image, posX * 32, posY * height, 32, height - 32, px, py + 32 - height, 32, height - 32);
+        core.setFilter('event2', null);
         if (alpha != null) core.setAlpha('event2', alpha);
     }
 }
@@ -951,7 +1010,9 @@ maps.prototype._drawBlockInfo_bgfg = function (blockInfo, name, x, y, ctx) {
     var alpha = null;
     if (blockInfo.opacity != null) alpha = core.setAlpha(ctx, blockInfo.opacity);
     else if (name == 'fg' && this._drawBlockInfo_shouldBlurFg(x, y)) alpha = core.setAlpha(ctx, 0.6);
+    core.setFilter(ctx, blockInfo.filter);
     core.drawImage(ctx, image, posX * 32, posY * height, 32, height, px, py + 32 - height, 32, height);
+    core.setFilter(ctx, null);
     if (alpha != null) core.setAlpha(ctx, alpha);
 }
 
@@ -1025,7 +1086,9 @@ maps.prototype._drawMap_drawBlockInfo = function (ctx, block, blockInfo, arr, on
     if (blockInfo.cls == 'autotile') { // Autotile单独处理
         var alpha = null;
         if (block.opacity != null) alpha = core.setAlpha(ctx, block.opacity);
+        core.setFilter(ctx, block.filter);
         this._drawAutotile(ctx, arr, block, 32, 0, 0, 0, onMap);
+        core.setFilter(ctx, null);
         if (alpha != null) core.setAlpha(ctx, alpha);
         if (onMap) this.addGlobalAnimate(block);
         return;
@@ -1034,7 +1097,9 @@ maps.prototype._drawMap_drawBlockInfo = function (ctx, block, blockInfo, arr, on
         var height = blockInfo.height;
         var alpha = null;
         if (block.opacity != null) alpha = core.setAlpha(ctx, block.opacity);
+        core.setFilter(ctx, block.filter);
         core.drawImage(ctx, blockInfo.image, 32 * blockInfo.posX, height * blockInfo.posY, 32, height, 32 * block.x, 32 * block.y + 32 - height, 32, height);
+        core.setFilter(ctx, null);
         if (alpha != null) core.setAlpha(ctx, alpha);
         return;
     }
@@ -1459,20 +1524,19 @@ maps.prototype._drawAutotileAnimate = function (block, animate) {
 
     var cv = block.name?core.canvas[block.name]:core.canvas.event;
     cv.clearRect(32 * x - 32 * core.bigmap.posX, 32 * y - 32 * core.bigmap.posY, 32, 32);
+    var alpha = null;
+    if (block.opacity != null) alpha = core.setAlpha(cv, block.opacity);
+    core.setFilter(cv, block.filter);
     if (block.name) {
-        var alpha = null;
-        if (block.opacity != null) alpha = core.setAlpha(cv, block.opacity);
         if (block.name == 'bg')
             core.drawImage('bg', core.material.groundCanvas.canvas, 32 * x - 32 * core.bigmap.posX, 32 * y - 32 * core.bigmap.posY);
         this._drawAutotile(cv, this._getBgFgMapArray(block.name), block, 32, 0, 0, animate, true);
-        if (alpha != null) core.setAlpha(cv, alpha);
     }
     else {
-        var alpha = null;
-        if (block.opacity != null) alpha = core.setAlpha(cv, block.opacity);
         this._drawAutotile(cv, this.getMapArray(), block, 32, 0, 0, animate, true);
-        if (alpha != null) core.setAlpha(cv, alpha);
     }
+    core.setFilter(cv, null);
+    if (alpha != null) core.setAlpha(cv, alpha);
 }
 
 ////// 为autotile判定边界 ////// 
@@ -1723,6 +1787,14 @@ maps.prototype.getBlockOpacity = function (x, y, floorId, showDisable) {
     return block.opacity == null ? 1.0 : block.opacity;
 }
 
+////// 获得某个点的filter //////
+maps.prototype.getBlockFilter = function (x, y, floorId, showDisable) {
+    var block = core.getBlock(x, y, floorId, showDisable);
+    if (block == null) return null;
+    if (block.filter == null) return {blur: 0, hue: 0, grayscale: 0, invert: false, shadow: 0};
+    return core.clone(block.filter);
+}
+
 ////// 获得某个图块或素材的信息，包括 ID，cls，图片，坐标，faceIds 等等 //////
 maps.prototype.getBlockInfo = function (block) {
     if (!block) return null;
diff --git a/libs/ui.js b/libs/ui.js
index fac02d0a..0ea36ac0 100644
--- a/libs/ui.js
+++ b/libs/ui.js
@@ -462,6 +462,24 @@ ui.prototype.setOpacity = function (name, opacity) {
     if (ctx) ctx.canvas.style.opacity = opacity;
 }
 
+////// 设置某个canvas的filter //////
+ui.prototype.setFilter = function (name, filter) {
+    var ctx = this.getContextByName(name);
+    if (!ctx) return;
+    if (!filter) ctx.filter = 'none';
+    else if (typeof filter === 'string') ctx.filter = filter;
+    else {
+        var x = [];
+        if (filter.blur > 0) x.push('blur(' + filter.blur +'px)');
+        if (filter.hue > 0) x.push('hue-rotate(' + filter.hue + 'deg)');
+        if (filter.grayscale > 0) x.push('grayscale(' + filter.grayscale + ')');
+        if (filter.invert) x.push('invert(1)');
+        if (filter.shadow > 0) x.push('drop-shadow(0 0 ' + filter.shadow + 'px black)');
+        if (x.length == 0) ctx.filter = 'none';
+        else ctx.filter = x.join(' ');
+    }
+}
+
 ////// 设置某个canvas的绘制属性（如颜色等） //////
 ui.prototype.setFillStyle = function (name, style) {
     var ctx = this.getContextByName(name);
diff --git a/runtime.d.ts b/runtime.d.ts
index fb10a0a7..2872d234 100644
--- a/runtime.d.ts
+++ b/runtime.d.ts
@@ -2271,6 +2271,9 @@ declare class ui {
     /** 设置某个canvas的alpha值；返回设置之前画布的不透明度。 */
     setAlpha(name: string | CanvasRenderingContext2D, alpha: number): number
 
+    /** 设置某个canvas的filter属性 */
+    setFilter(name: string | CanvasRenderingContext2D, filter: any): void
+
     /** 设置某个canvas的透明度；尽量不要使用本函数，而是全部换成setAlpha实现 */
     setOpacity(name: string | CanvasRenderingContext2D, opacity: number): void