5-2模糊美食发红包看美食_body { padding: 0; margin: 0; } .blurdiv { positio-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46444569/article/details/105734609
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>发红包了能看的照片</title>
<link rel="stylesheet" type="text/css" href="css/photo.css">
</head>
<body>
<div class="blurDiv">
    <img class="blurImg" id="blurImg" src="images/pic.jpg">
    <canvas id="myCanvas"></canvas>
    <a href="javascript:reset()" class="button" id="buttonReset">想看我么</a>
    <a href="javascript:show()" class="button" id="buttonShow">收到红包</a>
</div>
<script src="js/photo.js" type="text/javascript"></script>
</body>
</html>

CSS:
body {
  padding: 0;
  margin: 0;
}
.blurDiv {
  position: relative;
  width:877px;
  height: 672px;
  margin: 50px auto 0;/*外边距：顶部50px 左右水平居中 底部0*/
}
.blurDiv .blurImg {
  width: 870px;
  height: 672px;
  display: block;/*把行元素强制转换为块元素*/
  filter: blur(20px);/*滤镜：模糊程度20px*/
  -webkit-filter: blur(20px);/*webkit保留 否则filter没有作用*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.blurDiv #myCanvas {
  display: block;
  margin: 0 auto;
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
}
 .blurDiv .button {
  display: block;
  width: 240px;
  height: 60px;
  border-radius: 5px;/*边框圆角5px*/
  line-height: 60px;/*行高60px*/
  text-align: center;/*文字水平居中*/
  position: absolute;
  top: 105%;
  font-family: arial;
  font-size: 1.5em;/*em是字体大小的单位，与px的区别在此不做详细介绍*/
  color: #fff;
  text-decoration: none;/*清除字体样式*/
  z-index: 999;
}
 /*给该元素设置绝对定位和背景颜色*/
.blurDiv #buttonReset {
    left: 7%;/*距离父元素左边7%*/
  background-color: #c86814;
}
/*当鼠标悬浮在该元素时，背景颜色变为#ffb151*/
.blurDiv #buttonReset:hover {
  background-color: #ffb151;
}
.blurDiv #buttonShow {
    right: 7%;/*距离父元素右边7%*/
  background-color: #ff2f2e;
}
.blurDiv #buttonShow:hover {
  background-color: #ff596b;
}

JS:
var canvasWidth = 877;//声明画布的宽
var canvasHeight = 672;//声明画布的高
var canvas = document.getElementById("myCanvas");//获取画布
var context = canvas.getContext("2d");//获取画布的上下文
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var image = new Image();//声明图片
var radius = 50;//声明半径
image.src = "images/pic.jpg";//获取图片路径
image.onload = function(e){
	initCanvas();//初始画布
}
function initCanvas(){
	Region =
	{x:Math.random()*(canvas.width-2*radius)+radius,y:Math.random()
	*(canvas.height-2*radius)+radius,r:radius}
	draw(Region);//绘制图片
}
//绘制圆形.用clip()方法剪切圆形区域
function setRegion(Region){
	context.beginPath();
	context.arc(Region.x,Region.y,Region.r,0,Math.PI*2,false);
	context.clip();
}
function draw(){
	//用于每次清除上一次绘制的圆形，保证只显示一个圆形区域
	context.clearRect(0,0,canvas.width, canvas.height);
	context.save();
	setRegion(Region);
	context.drawImage(image,0,0);
	context.restore();
}
//单击事件reset()方法，在该方法中调用initCanvas()方法，每次在不同的位置绘制圆形区域。
function reset(){
	initCanvas();
}
//单击事件show()方法，在该方法中调用draw(image)方法，使圆形半径大于画布，这时就可以绘制完整的图片了，也就是收到红包的效果。
function show(){
	Region.r = 2*Math.max(canvas.width,canvas.height);
	draw(image,Region);
}
在这里插入图片描述