微信会员小程序_js canvas完成红包照片效果

发布时间:2021-01-08 13:13 作者:jianzhan

摘要: js canvas完成大红包相片实际效果 本文关键详细介绍了js canvas完成大红包相片实际效果今日跟随学习培训了一个制作大红包相片相近作用的demo,很有趣,因此在这里里共享编码给大

js canvas实现红包照片效果       这篇文章主要介绍了js canvas实现红包照片效果

今天跟着学习了一个制作红包照片类似功能的demo,很有意思,所以在这里分享代码给大家,可以直接使用。

先贴出效果图大家看一下:

点击重置后会以随机一个点为圆心生成半径为50px的圆,然后显示清晰的图像;

点击显示后会全部显示清晰的图像;

功能虽然很少,但是很有意思不是吗,而且做好了适配可以在不同分辨率大小的设备上都可以玩。

只需要js+css+html就可以实现,不过需要引入jquery

下面po出完整代码:

<:
 !DOCTYPE HTML 
 html 
 head lang="en" 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" 
 title Canvas玩儿转红包照片 /title 
 script src="jquery/2.2.0/jquery.min.js" type="text/javascript" /script 
 link href="img.css" rel="external nofollow" rel="stylesheet" type="text/css" / 
 meta name="viewport"
 content=" height = device-height,
 width = device-width,
 initial-scale = 1.0,
 minimum-scale = 1.0,
 maximum-scale = 1.0,
 user-scalable = no"/ 
 /head 
 body 
 div id="blur-div" 
 img src="images/1.jpg" id="blur-image" 
 canvas id="canvas" 
 /canvas 
 a href="javascript:reset()" rel="external nofollow" id="reset-button" 重置 /a 
 a href="javascript:show()" rel="external nofollow" id="show-button" 显示 /a 
 /div 

$("#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") leftMargin = (image.width - canvas.width) / 2 topMargin = (image.height - canvas.height) / 2 $("#blur-image").css("top", "-" + topMargin + "px") $("#blur-image").css("left", "-" + leftMargin + "px") initCanvas() function initCanvas(){ clearInterval(a) clippingRegion = {x:Math.random()*(canvas.width-2*radius)+radius,y:Math.random()*(canvas.height-2*radius)+radius,r:radius} console.log(canvas.width); console.log(canvas.height); clippingRegion.r = 0; var id = setInterval( function(){ clippingRegion.r += 2; if(clippingRegion.r 50){ clearInterval(id) 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){ /*每次绘制之前,对canvas的内容进行清空*/ context.clearRect(0,0,canvas.width,canvas.height) /*存储canvas的当前状态*/ context.save() /*剪辑出一个圆形的区域*/ setClippingRegion(clippingRegion) /*开始画*/ //context.drawImage(image, 0 , 0) /*leftMargin, topMargin, canvas.width, canvas.height表示image剪出这么大 0, 0, canvas.width, canvas.height 表示canvas的大小 context.drawImage(image, leftMargin, topMargin, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height) /*canvas的状态恢复*/ context.restore() function reset(){ initCanvas(); function show(){ /*此函数是内置函数,表示每隔多少秒就执行前面的函数 所以第一个参数是函数,后面是间隔时间*/ var id = setInterval( function(){ a = id; clippingRegion.r += 20 if(clippingRegion.r 2*Math.max(canvas.width,canvas.height)){ /*用来关闭函数执行的*/ clearInterval(id); draw(image ,clippingRegion) /*阻止滑动操作*/ /*canvas.addEventListener("touchstart",function(e){ e.preventDefault() });*/


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


  • 苍鹿自助建站系统,中小

    随着着互联网的高新科技高新科技不断发展趋势发展趋势,公司企业网站建设技术性性逐渐向智能化发展,自助式式建设网站变为目前企业建设网站的甄选。非常是在是对于中小型型企

  • DIY T恤 个性定制网站如何

    1、我不会会赞成网站做了多 营销推广营销推广主题风格主题活动,遏制做赚营销推广方式的社会发展发展趋势化营销推广营销推广2、服务即营销推广营销推广,更强的专用型专用工具

  • 多功能自助查询打印终端

    企业为员工申请办理申请办理新职工新员工入职、离职、收集、填好、存档、打印员工信息内容內容等,尽管难度系数系数不太高,但假如工作中工作人员甚多,也是一件极其复杂的事

  • 开发定制一款微信游戏大

    相近当下时兴的“冰桶挑戰”、“找寻房祖名”这类手机游戏

    如今哪儿还必须去订制开发设计的,那类成本费高,实际效果十分好还不一定。如今自助式制作,无需钱和能够自身实

  • 自助建站和定制网站,两

    大伙儿都掌握,不管是自助式式建设网站还是定制网站,初期务必支付一定的花销,但是为什么自助式式建设网站和定制网站的花销差别那么大?在哪儿儿里花消比较多呢?下面大伙儿