canvas红包照片实例分享
更新时间：2017年02月28日 09:55:17 作者：ywhluck
本文主要分享了canvas红包照片的实例代码，具有很好的参考价值，下面跟着小编一起来看下吧
效果:
点击RESET：随机显示剪辑区域；
点击SHOW：显示完整清晰图片；
图（1）点击RESET
图（2）点击SHOW
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas红包照片</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
#blur_div{
width: 500px;
height: 334px;
margin: 0 auto;
position: relative;
margin-top:100px;
}
#blur_img{
display: block;
width: 500px;
height: 334px;
margin: 0 auto;
filter: blur(15px);/*CSS3模糊*/
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-ms-filter: blur(15px);
-o-filter: blur(15px);
position:absolute;
left: 0px;
top: 0px;
z-index: 0;
}
#canvas{
display: block;
margin: 0 auto;
position:absolute;
left: 0px;
top: 0px;
z-index: 100;
/* background-color:red;*/
}
.button{
display:block;
position:absolute;
z-index:200;
width:80px;
height:30px;
color:white;
text-decoration:none;
text-align:center;
line-height:30px;
border-radius:5px;
}
#reset_button{
left:100px;
bottom:20px;
background-color:#058;
}
#reset_button:hover{
background-color:#047;
}
#show_button{
right:100px;
bottom:20px;
background-color:#085;
}
#show_button:hover{
background-color:#074;
}
</style>
</head>
<body>
<div id="blur_div">
<img id="blur_img" src="http://cdn.attach.qdfuns.com/notes/pics/201702/27/221935e35ugwllljg10912.jpg" />
<canvas id="canvas"></canvas>
<a href="javascript:reset()" rel="external nofollow" class="button" id="reset_button">RESET</a>
<a href="javascript:show()" rel="external nofollow" class="button" id="show_button">SHOW</a>
</div>
<script>
var canvasWidth = 500;
var canvasHeight = 334;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
/*在canvas上绘制清晰的图片*/
var image = new Image();
var radius = 40;
var clippingRegion = {x:-1,y:-1,r:radius};/*初始化剪辑区域*/
image.src = "http://cdn.attach.qdfuns.com/notes/pics/201702/27/221935e35ugwllljg10912.jpg";
image.onload = function(e){
initCanvas();
}
function initCanvas(){
clippingRegion = {x:Math.random()*(canvas.width-2*radius)+radius,
y:Math.random()*(canvas.height-2*radius)+radius,
r:radius};/*随机剪辑区域*/
draw(image,clippingRegion);
}
function setClippingRegion(clippingRegion){
context.beginPath();
context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,2*Math.PI,false);/*绘制剪辑区域的路径*/
context.clip();
}
function draw(image,clippingRegion){
context.clearRect(0,0,canvas.width,canvas.height);/*清除画布*/
context.save();
setClippingRegion(clippingRegion);/*重新设置剪辑区域*/
context.drawImage(image,0,0);
context.restore();
}
/*重置显示剪辑区域*/
function reset(){
initCanvas();
}
/*显示整个清晰图片*/
function show(){
var theAnimation = setInterval(
function(){
clippingRegion.r += 20;
if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){
clearInterval(theAnimation);
}
draw(image,clippingRegion);
},20)
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了如何在JavaScript中谨慎使用代码注释，必要的注释可以阐明实现细节和设计意图，以此节约自己和别人的时间。 然而很多时候注释起的作用却适得其反，,需要的朋友可以参考下2019-06-06
javascript使用substring实现的展开与收缩文字功能示例
这篇文章主要介绍了javascript使用substring实现的展开与收缩文字功能,涉及javascript元素遍历与属性设置相关操作技巧,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了JS如何实现手机端输入验证码效果,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的心情记事本，文中的示例代码讲解详细，感兴趣的小伙伴可以和小编一起学习一下2023-01-01
!!一般用来将后面的表达式强制转换为布尔类型的数据（boolean），也就是只能是true或者false。下面看看通过本文给大家介绍了JS中的!!，需要的朋友参考下吧2017-12-12
JavaScript设计模式之观察者模式（发布者-订阅者模式）
这篇文章主要介绍了JavaScript设计模式之观察者模式（发布者-订阅者模式）,本文详细的讲解了JavaScript中的观察者模式,需要的朋友可以参考下2014-09-09
在本篇内容里小编给各位整理了一篇关于JS实现提示框跟随鼠标移动的相关实例代码，需要的朋友们学习下。2019-08-08
JS文本框不能输入空格验证方法，需要的朋友可以参考一下2013-03-03
JavaScript String(字符串)对象的简单实例(推荐)
下面小编就为大家带来一篇JavaScript String(字符串)对象的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
本文主要介绍了简单的渐变轮播插件，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论