<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>h5</title> <script src="js/jquery-2.1.4.min.js"></script> <link rel="stylesheet" type="text/css" href="css/h5.css" /> </head> <body> <div id="blur-div"> <img src="bg.jpg" id="blur-img" /> <canvas id="canvas"></canvas> </div> <script src="js/h5.js"></script> </body></html>JSvar canvasWidth=800var canvasHeight=600var canvas=document.getElementById('canvas');var context=canvas.getContext('2d'); canvas.width = canvasWidth; canvas.height = canvasHeight; var image = new Image();var clippingRegion={x:400,y:200,r:50} image.src='bg.jpg'; image.onload=function(e){ initCanvas(); } function initCanvas(){ 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){ context.clearRect(0,0,canvas.width,canvas.height); context.save(); setClippingRegion( clippingRegion ) context.drawImage(image,0,0); context.restore(); }
- 1 回答
- 0 关注
- 989 浏览
添加回答
举报
0/150
提交
取消