canvas实现微信朋友圈猜照片功能

最新推荐文章于 2021-06-22 12:07:53 发布

原创最新推荐文章于 2021-06-22 12:07:53 发布 · 572 阅读

0 ·

CC 4.0 BY-SA版权

mobile 同时被 2 个专栏收录

8 篇文章

订阅专栏

canvas

7 篇文章

订阅专栏

本文介绍了一种利用HTML5 Canvas实现的互动功能——微信朋友圈猜照片。通过随机模糊显示图片的一部分并允许用户逐渐揭示全貌的方式增加趣味性和互动性。文章提供了完整的代码示例，包括如何设置剪切区域、绘制图像以及实现显示和重置功能。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<title>canvas实现微信朋友圈猜照片功能</title>
<!--css-->
<link rel="stylesheet" href="css/global.css" />
</head>
<body>
	<div class="zbx-photo-content">
		<canvas class="zbx-photoCanvas" id="canvas"></canvas>
		<img class="zbx-photoImg" id="photoImg" src="images/im1.jpg" />		
		<div class="zbx-photo-text">
			<a href="javascript:reset()" class="zbx-button" id="resetBtn">重置</a>
			<a href="javascript:show()" class="zbx-button" id="showBtn">显示</a>		
		</div>
	</div>

	<!--js-->
	<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	<script type="text/javascript" src="js/global.js" ></script>
</body>
</html>

/**
 * zbx
 * 2016.4.27
 * **/
body,html{
	margin: 0;
	padding: 0;
	height: 100%;
}
.zbx-photo-content{
	position: relative;
	height: 100%;
	width: 100%;
}
.zbx-photoImg{
	display: block;
	margin: auto;
	width: 100%;
	filter: blur(20px);
	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-ms-filter: blur(20px);
	-o-filter: blur(20px);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.zbx-photoCanvas{
	display: block;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}
.zbx-photo-text{
	position: absolute;
    bottom: 20%;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}
.zbx-photo-text a{
	font-size: 20px;
    margin: 20px;
    text-decoration: none;
    display: block;
    width: 100px;
    border-radius: 8px;
    background: #E0663A;
    text-align: center;
    line-height: 32px;
    color: #fff;
    float: left;
}
.zbx-photo-text a:last-child{
    float: right;
    background: #655AFF;
}

/**
 * zbx
 * 2016.4.27
 * **/
var photoImgVal = document.getElementById('photoImg');
var canvasWidth = photoImgVal.offsetWidth ;
var canvasHeight = photoImgVal.offsetHeight;
var canvas = document.getElementById('canvas');
var cantext = canvas.getContext('2d');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var roundR = 40;
var clickLimit = 0;
//加载图
var image = new Image();
var clippinRregion = {x:0,y:0,r:roundR};
image.src = "images/im1.jpg";
image.onload = function (e){
	initCanvas();
}

function initCanvas(){
	clippinRregion = {x:Math.random()*(canvasWidth - 2*roundR) + roundR,
					  y:Math.random()*(canvasHeight - 2*roundR) + roundR,
					  r:roundR};
	draw(image,clippinRregion);
}
//剪辑区域
function setClippingRegion(clippinRregion){
	cantext.beginPath();
	cantext.arc(clippinRregion.x,clippinRregion.y,clippinRregion.r,0,Math.PI*2);
	cantext.clip();
}
function draw(image , clippinRregion){
	cantext.clearRect(0,0,canvasWidth,canvasHeight);
	cantext.save();
	setClippingRegion(clippinRregion);
	cantext.drawImage(image,0,0,canvasWidth,canvasHeight);
	cantext.restore();
}
function reset(){
	if(clickLimit == 0){
		
		initCanvas();
	}else{
		return;
	}

}

//show
function show(){
	var theAnimation = setInterval(
		function(){
			clickLimit = 1;
			clippinRregion.r += 30;
			if(clippinRregion.r >= 2*Math.max(canvasWidth,canvasHeight)){
				clickLimit = 0;
				clearInterval(theAnimation);
			}
			draw(image , clippinRregion);	
		},
		30
	);
}