今天跟着学习了一个制作红包照片类似功能的demo，很有意思，所以在这里分享代码给大家，可以直接使用。
先贴出效果图大家看一下：
点击重置后会以随机一个点为圆心生成半径为50px的圆，然后显示清晰的图像；
点击显示后会全部显示清晰的图像；
功能虽然很少，但是很有意思不是吗，而且做好了适配可以在不同分辨率大小的设备上都可以玩。
只需要js+css+html就可以实现，不过需要引入jquery
下面po出完整代码：
demo.html:
img.css:
img.js:
var canvasWidth = window.innerWidthvar canvasHeight = window.innerHeight var canvas = document.getElementById("canvas")var context = canvas.getContext("2d") canvas.width=canvasWidthcanvas.height=canvasHeightvar radius = 50 var image = new Image()var clippingRegion = {x:-1,y:-1,r:radius} var leftMargin = 0, topMargin=0 var a; image.src = "images/1.jpg"image.onload = function(e){ $("#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) }, 30 ) } function setClippingRegion(clippingRegion){ context.beginPath() context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI*2, 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.drawImage(image, leftMargin, topMargin, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height) 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) }, 30 )}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
最新文章
热门文章
猜你喜欢
