js实现发红包看照片（来自黑马程序员教材）

本文链接：https://blog.csdn.net/qq_64037242/article/details/130085804

现如今用手机发红包已经是家喻户晓的事情，社交软件中经常出现好友之间“要红包”的情况。甚至出现了“发红包才能看的照片”，一些好奇心强的小伙伴为了看照片就必须发红包，本项目将带领读者揭开红包照片的“真面目”

html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发红包才能看的照片</title>
    <link rel="stylesheet" href="./css/photo.css">
</head>

<body>
    <div class="blurDiv">
        <img src="images/pic.jpeg" alt="" class="blurImg" id="blurImg">
        <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"></script>
</body>

</html>

css代码如下

body {
    padding: 0;
    margin: 0;
}

.blurDiv {
    position: relative;
    width: 877px;
    height: 672px;
    margin: 50px auto 0;
}


/* 设置初始化图片模糊效果 */

.blurImg {
    width: 870px;
    height: 672px;
    display: block;
    /* 滤镜：模糊程度20px */
    filter: blur(20px);
    /* 处理兼容性 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    -webkit-filter: blur(20px);
}


/* 设置画布效果 */

.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;
    line-height: 60px;
    text-align: center;
    position: absolute;
    top: 105%;
    font-family: arial;
    font-size: 1.5em;
    color: #fff;
    text-decoration: none;
    z-index: 999;
}

.blurDiv #buttonReset {
    left: 7%;
    background-color: #c86814;
}

.blurDiv #buttonReset：hover {
    background-color: #ffb151;
}

.blurDiv #buttonShow {
    right: 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.jpeg';

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();
}
// 单击按钮显示
function reset() {
    initCanvas();
}

function show() {
    Region.r = 2 * Math.max(canvas.width, canvas.height);
    draw(image, Region)
}

最后的实现效果如下