Canvas图片模糊效果（学习笔记）

来源：互联网发布：h248协议端口号编辑：程序博客网时间：2024/05/21 07:12

Canvas图片模糊效果学习视频：http://www.imooc.com/learn/601

Demo和学习笔记

index.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>canvas玩儿转红包照片</title><script type="text/javascript" src="js/jquery.js"></script><link href="css/blur.css" rel="stylesheet" type="text/css"><!-- 手机端适配 --><meta name="viewport"  content="height=device-height,     width=device-width,     initial-scale=1.0,     minimum-scale=1.0,     maximum-scale=1.0,     user-scalable=no" /><!-- 不允许用户缩放尺寸 --></head><body><div id="blur-div"><img src="images/image.jpg" id="blur-image"><canvas id="canvas"></canvas><a href="javascript:reset()" class="button" id="reset-button">RESET</a><a href="javascript:show()" class="button" id="show-button">SHOW</a></div><script type="text/javascript" src="js/blur.js"></script></body></html>

blur.css

@CHARSET "UTF-8";/*取消边距*/*{margin: 0 0;padding:0 0;}#blur-div{margin: 0 auto;position: relative;overflow:hidden;/*溢出部分隐藏*/}#blur-image{display:block;margin: 0 auto;filter:blur(20px);/* css3新属性：模糊效果 */-webkit-filter:blur(20px);-moz-filter:blur(20px);-ms-filter:blur(20px);-o-filter:blur(20px);position: absolute;left: 0px;top:0px;z-index: 0;}#canvas{display:block;margin: 0 auto;position: absolute;left: 0px;top:0px;z-index: 100;}.button{display:block;position: absolute;z-index: 200;width: 100px;height: 30px;color: white;text-decoration: none;text-align: center;line-height: 30px;border-radius:5px;}#reset-button{left:50px;bottom:20px;background-color: #058;}#reset-button:hover{background-color: #047;}#show-button{right:50px;bottom:20px;background-color: #085;}#show-button:hover{background-color: #074;}

blur.js

/** *  */var canvasWidth=window.innerWidth;var canvasHeight=window.innerHeight;//获取canvas的id值var canvas=document.getElementById("canvas");//获取上下文环境var context=canvas.getContext("2d");//设置canvas的长度和宽度canvas.width=canvasWidth;canvas.height=canvasHeight;var image=new Image();var radius=50;var clippingRegion={x:-1,y:-1,r:radius};//剪辑区域var leftMargin=0,topMargin=0;image.src="images/image.jpg";//图像加载image.onload=function(e){$("#blur-div").css("width",canvasWidth+"px");$("#blur-div").css("height",canvasHeight+"px");$("#blur-image").css("width",image.width+"px");$("#blur-image").css("height",image.height+"px");leftMargin=(image.width-canvas.width)/2;topMargin=(image.height-canvas.height)/2;$("#blur-image").css("top",String(-topMargin)+"px");$("#blur-image").css("left",String(-leftMargin)+"px");initCanvas();};function initCanvas(){var theleft=leftMargin<0?-leftMargin:0;var thetop=topMargin<0?-topMargin:0;clippingRegion={x:Math.random()*(canvas.width-2*radius-2*theleft)+radius+theleft,y:Math.random()*(canvas.height-2*radius-2*thetop)+radius+thetop,r:radius};//避免边缘化draw(image,clippingRegion);}function setClippingRegion(clippingRegion){context.beginPath();context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,Math.PI*2,false);context.clip();//剪辑区域}//绘制图片function draw(image,clippingRegion){context.clearRect(0,0,canvas.width,canvas.height);//清除context.save();//保存setClippingRegion(clippingRegion);context.drawImage(image,Math.max(leftMargin,0),Math.max(topMargin,0),Math.min(canvas.width,image.width),Math.min(canvas.height,image.height),leftMargin<0?-leftMargin:0,topMargin<0?-topMargin:0,Math.min(canvas.width,image.width),Math.min(canvas.height,image.height));context.restore();//恢复}function reset(){clearInterval(theAnimation);initCanvas();}var theAnimation;function show(){//添加动画theAnimation=setInterval(function(){//显示整个清晰的图像clippingRegion.r+=20;if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){clearInterval(theAnimation);//停止动画}draw(image,clippingRegion);},30);}canvas.addEventListener("touchstart",function(e){e.preventDefault();});

总结：

在pc端部分，学习内容比较基础。主要涉及到css3的filter属性、canvas标签的基本使用、以及如何通过小技巧形成模糊到清晰的动态效果等。在适配手机端部分，需要考虑canvas尺寸、image尺寸、剪辑尺寸等多个因素对屏幕的影响。

0 0