canvas仿微信红包照片

2018-02-27 10:55:58来源:http://www.wclimb.site/2017/06/28/canvas微信红包照片/作者:wclimb的个人博客人点击

分享

<canvas id="cav" width="500" height="500"></canvas>
CSS

设置canvas的背景图


canvas{
background:url(https://b-ssl.duitang.com/uploads/item/201501/22/20150122203239_Cfr58.thumb.700_0.jpeg) no-repeat;
background-size:100% 100%;
}
JS
var canvas = document.querySelector("#cav")
var context = canvas.getContext("2d");
var randomX = Math.floor(Math.random()*440+30)
var randomY = Math.floor(Math.random()*440+30)
context.globalAlpha = 0.96;
context.fillStyle = '#333'
context.rect(0,0,canvas.width,canvas.height);
context.fill();
context.save()
context.beginPath()
context.arc(randomX,randomY,30,0,Math.PI*2,false);
context.clip();
context.clearRect(0,0,canvas.width,canvas.height)
context.restore();
var num = 30;
var time = null;
document.body.onclick = function(){
function circle(){
num += 5
context.save()
context.beginPath()
context.arc(randomX,randomY,num,0,Math.PI*2,false);
context.clip();
context.clearRect(0,0,canvas.width,canvas.height)
context.restore();
console.log(num)
if (num >= 677){
clearInterval(timer)
}
}
timer = setInterval(circle,10)
}
解析

随机出现圆心的位置,因为canvas为500*500 圆心为30 所以圆心的范围为 X(30,470) Y(470,30)


var randomX = Math.floor(Math.random()*440+30)
var randomY = Math.floor(Math.random()*440+30)

绘制矩形 透明度为0.96 填充颜色#333 宽高为canvas的宽高 最后用fill填充


context.globalAlpha = 0.96;
context.fillStyle = '#333'
context.rect(0,0,canvas.width,canvas.height);
context.fill();

初始化圆心的位置,用arc绘制圆,默认半径为30,用clip剪切,只有被剪切区域内是可见的


context.save()
context.beginPath()
context.arc(randomX,randomY,30,0,Math.PI*2,false);
context.clip();
context.clearRect(0,0,canvas.width,canvas.height)
context.restore();

点击body的时候,设置定时器,让圆的半径每隔10毫秒增加5,当num半径大于677关闭定时器,677为canvas对角的长度


document.body.onclick = function(){}

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台