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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
解密朋友圈红包照片功能
昨天大家是不是都被微信朋友圈的毛玻璃图片刷屏了?这是微信为新春红包准备的一个新的功能,昨天内测了一段时间,传播效应很大,这告诉我们一个道理:没钱,以后连朋友圈都看不了.这功能刚推出大家都在忙着发红包照片的时候,身为程序员天生的敏感,稍微研究了下如何不花钱就能查看,并且第一时间发布在我朋友圈里,今天就给大家分享下,这个技能可谓是Android开发必备哦. 先来回答大家的一个困惑,就是微信这功能怎么做出来的,好神奇啊,这功能说上线就上线,说下线就下线,不少人猜测到底是用了什么神奇的技术实现的,用了传
-
canvas红包照片实例分享
效果: 点击RESET:随机显示剪辑区域: 点击SHOW:显示完整清晰图片: 图(1)点击RESET 图(2)点击SHOW 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas红包照片</title> <script type="text/javascript" src="https://
-
js canvas实现红包照片效果
今天跟着学习了一个制作红包照片类似功能的demo,很有意思,所以在这里分享代码给大家,可以直接使用. 先贴出效果图大家看一下: 点击重置后会以随机一个点为圆心生成半径为50px的圆,然后显示清晰的图像: 点击显示后会全部显示清晰的图像: 功能虽然很少,但是很有意思不是吗,而且做好了适配可以在不同分辨率大小的设备上都可以玩. 只需要js+css+html就可以实现,不过需要引入jquery 下面po出完整代码: demo.html: <!DOCTYPE HTML> <html> &l
-
Canvas实现微信红包照片效果
本篇文章来源慕课网课程<canvas玩转红包照片>,用canvas及css3结合,实现红包照片的效果,并不做支付过程,代替的是使用2个按钮,显示清晰图片和重置圆圈可见区域.未做移动的屏幕适应 微信红包照片效果图一张模糊图片,只有鱼哥小圆圈的区域是清晰可见 原理分析: 1.先在页面放置一张原图片image,用css3的filter做模糊处理 2.在图片区域上方放置一个与图片image大小一样的canvas,放置整张清晰图片 3.通过canvas的图片剪辑方法,剪辑出一个圆圈区域,就达到了只显示一
-
Python tkinter库绘图实例分享
目录 一.小房子绘制 二.彩色气泡动画绘制 三.画布创建 一.小房子绘制 实例代码: # coding=utf-8 import tkinter as tk # 导入tkinter模块 root = tk.Tk() # 创建一个顶级窗口 root.title('小房子1') # 设置标题 canvas = tk.Canvas(root, bg='white', width=700, height=700) # 在root窗口上创建画布canvas,
-
Spring集成MyBatis完整实例(分享)
为了梳理前面学习的<Spring整合MyBatis(Maven+MySQL)一>与<Spring整合MyBatis(Maven+MySQL)二>中的内容,准备做一个完整的示例完成一个简单的图书管理功能,主要使用到的技术包含Spring.MyBatis.Maven与MySQL等.最后的运行效果如下: 项目结构如下: 一.新建一个基于Maven的Web项目 1.1.创建一个简单的Maven项目,项目信息如下: 1.2.修改层面信息,在项目上右键选择属性,再选择"Project
-
php写app接口并返回json数据的实例(分享)
第一步:conn.PHP文件,用于连接数据库并定义接口格式,代码如下: <?php header("charset=utf-8"); $servername="localhost"; $username="root"; $password="root"; $dbname="test"; $conn = mysql_connect($servername,$username,$password); if
-
Python爬虫DOTA排行榜爬取实例(分享)
1.分析网站 打开开发者工具,我们观察到排行榜的数据并没有在doc里 doc文档 在Javascript里我么可以看到下面代码: ajax的post方法异步请求数据 在 XHR一栏里,我们找到所请求的数据 json存储的数据 请求字段为: post请求字段 2.伪装浏览器,并将json数据存入excel里面 获取信息 将数据保存到excel中 3.结果展示 以上这篇Python爬虫DOTA排行榜爬取实例(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
免费手机号码归属地API查询接口和PHP使用实例分享
免费手机号码归属地API查询接口和PHP使用实例分享 最近在做全国性的行业分类信息网站,需要用到手机号归属地显示功能,于是就穿梭于各大权威站点之间偷来了API的接口地址. 分享出来,大家可以用到就拿去呵. 一.淘宝网API 复制代码 代码如下: API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443 参数: tel:手机号码 返回:JSON 二.拍拍API 复制代码 代码如下: API地址: http
-
nodeJS实现简单网页爬虫功能的实例(分享)
本文将使用nodeJS实现一个简单的网页爬虫功能 网页源码 使用http.get()方法获取网页源码,以hao123网站的头条页面为例 http://tuijian.hao123.com/hotrank var http = require('http'); http.get('http://tuijian.hao123.com/hotrank',function(res){ var data = ''; res.on('data',function(chunk){ data += chunk;