红包模糊

最新推荐文章于 2023-03-06 09:52:16 发布

原创最新推荐文章于 2023-03-06 09:52:16 发布 · 437 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

canvas 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas实现的模糊红包效果案例。通过随机显示部分清晰图像的方式，增加了红包打开时的趣味性和期待感。文章详细展示了如何利用JavaScript控制Canvas绘制图像，并实现了通过点击按钮来重置和显示完整清晰图像的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>

<head>

<title>模糊红包效果</title>

</head>

* {

margin: 0px;

padding: 0px;

}

#blur-div {

width: 350px;

height: 220px;

margin: 0 auto;

position: relative;

overflow: hidden;

}

.button {

display: block;

position: absolute;

z-index: 200;

/*按钮在最上面*/

width: 60px;

height: 30px;

color: white;

text-decoration: none;

text-align: center;

line-height: 30px;

border-radius: 2px;

}

#reset-button {

left: 40px;

bottom: 20px;

background-color: #058;

}

#reset-button:hover {

background-color: #047;

}

#show-button {

right: 40px;

bottom: 20px;

background-color: #085;

}

#show-button:hover {

background-color: #074;

}

#canvas {

display: block;

margin: 0 auto;

position: absolute;

left: 0px;

top: 0px;

/*canvas在image之上，在按钮下，z-index大于image,小于btn*/

z-index: 100;

}

#blur-image {

display: block;

width: 350px;

height: 220px;

margin: 0 auto;

/*模糊效果*/

filter: blur(20px);

-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;

}

</style>

<body>

</div>

var canvasWidth = window.innerWidth; //最外层div宽=窗口宽高，为了适应

var canvasHeight = window.innerHeight;

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

//设置canvas大小和最外层div宽高一样

canvas.width = canvasWidth;

canvas.height = canvasHeight;

//用canvas显示清晰图像

var image = new Image();

var radius = 30;

//剪辑区域

var clippingRegion;

image.src = "img/a11.jpg";

//因为图像加载需要时间，所以用onload方法，等待图片加载完成后再执行函数

image.onload = function(e) {

//blur-div 和canvas宽高调整

$('#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");

initCanvas();

}

function initCanvas() {

//重置剪辑区域，归位,随机

clippingRegion = { //保证剪辑区域一定在有图像的地方

x: Math.random() * (canvas.width - 2 * radius) + radius, //30-320 0-width 减掉半径30 350-30*2

y: Math.random() * (canvas.height - 2 * radius) + radius, //30-190 0-height 减掉半径30 220-30*2

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, 0, 0); //图片大于canvas

context.restore();

}

//完全显示清晰图像，复用draw函数，将剪辑区域变大

function show() {

//添加动画,此函数有缺点

clippingRegion.r = radius; //给半径归位

var theAnimation = setInterval(function() {

console.log("anima");

clippingRegion.r += 20; //慢慢扩大显示

//边界条件

if(clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止动画，否则函数执行不停止1000

clearInterval(theAnimation);

}

draw(image, clippingRegion);

}, 30);

}

//重置，initCanvas

function reset() {

initCanvas();

}

</script>

</body>

</html>