canvas学习（十九）：css3 filter的十种特效
跟着慕课网上的老师学“使用canvas玩转红包”时，觉得老师讲的filter特效听酷的，就跟着老师的例子琢磨了一下，这里做个记录。
这里不讲css3的filter是什么，感兴趣的什么可以看这里。
filter的十种属性为：
grayscale：灰度，取值范围0-1(表示0%的原色到100%的灰色)，默认值1
sepia：褐色，取值范围0-1(表示0%的原色到100%的褐色)，默认值1
saturate：饱和度，默认值1
hue-rotate：色相旋转，取值范围0-360deg，默认0deg
invert：反色，取值范围0-1，默认为1
opacity：透明度，取值范围0-1（完全透明到完全不透明），默认为1
brightness：亮度，取值范围0-1（数字越小越暗，越大越亮），默认为1
contrast：对比度，默认为1
blur：模糊，数字越大越模糊，默认为0不模糊
drop-shadow：阴影
以下的例子可以切换着看各个效果：
例子的效果图：
例子的代码：
页面结构：
<body> <div id="left_control"> <image id="pro_image" src="cat.jpg"> </div> <div id="right_control"> <image id="next_image" src="cat.jpg"> </div> <div id="btn_control"> <div id="grayscale_btn" class="color_btn color_btn_selected" onclick="modifyFilter(this,1);">grayscale</div> <div id="sepia_btn" class="color_btn" onclick="modifyFilter(this,1);">sepia</div> <div id="saturate_btn" class="color_btn" onclick="modifyFilter(this,3);">saturate</div> <div id="hue-rotate_btn" class="color_btn" onclick="modifyFilter(this,'180deg');">hue-rotate</div> <div id="invert_btn" class="color_btn" onclick="modifyFilter(this,1);">invert</div> <div id="opacity_btn" class="color_btn" onclick="modifyFilter(this,0.5);">opacity</div> <div id="brightness_btn" class="color_btn" onclick="modifyFilter(this,0.5);">brightness</div> <div id="contrast_btn" class="color_btn" onclick="modifyFilter(this,3);">contrast</div> <div id="blur_btn" class="color_btn" onclick="modifyFilter(this,'5px');">blur</div> <div id="drop-shadow_btn" class="color_btn" onclick="modifyFilter(this,'10px 10px 10px #aaa');">drop-shadow</div> <div class="clearfix"></div> <div> </body>
CSS样式：
#left_control{float:left;}
#right_control{float:right;}
#btn_control{clear:both;width:1150px;margin:0 auto;}
#pro_image{margin:0px 10px 0px 20px;width:650px;height:650px;}
#next_image{margin:0px 20px 0px 10px;width:650px;height:650px;filter:grayscale(1);}
.color_btn{
float:left;
margin:10px 5px 0 0;
border:5px solid white;
width:100px;
height:40px;
line-height:40px;
border-radius:10px 10px;
cursor:pointer;
background-color:#075A8C;
text-align:center;
color:white;
}
.color_btn:hover{
border:5px solid violet;
}
.color_btn_selected{
background-color:#CD080F;
}
.clearfix{
clear:both;
}JS：
function modifyFilter(obj,value){
$(".color_btn_selected").removeClass("color_btn_selected");
$(obj).addClass("color_btn_selected");
var filter = $(obj).text();
//alert(filter+"("+value+")");
document.getElementById("next_image").style.filter=filter+"("+value+")";
}十种特效的效果图如下：
最后，感谢老师的分享！
相关推荐
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25