canvas基础之 贼酷微信红包图片效果

canvas基础之 贼酷微信红包图片效果_第1张图片
canvas基础之 贼酷微信红包图片效果_第2张图片


canvas基础之 贼酷微信红包图片效果_第3张图片


canvas基础之 贼酷微信红包图片效果_第4张图片


canvas基础之 贼酷微信红包图片效果_第5张图片


canvas基础之 贼酷微信红包图片效果_第6张图片


canvas基础之 贼酷微信红包图片效果_第7张图片




整体思路

获取canvas的上下文,让画布,图片,盒子三者相互适应,没有做屏幕的适配. 

定义一些常量  剪辑区域的半径  剪辑区域数据  

定义一个初始化函数,打开网页就执行,图片就会模糊,并且剪辑区域显示 

所以在初始化化函数可以定义一个函数 用来绘制画布的函数

在画布函数中把图片放入画布中,然后在该函数定义一个函数用来画剪辑区域的函数 

这样三者的关系就能很好的联系一起.

最好点击显示 执行一个显示函数 里面也是执行绘制画布的函数 又可以复用了

随机定义一个随机函数就让整个画布重新初始化  

关键点,几个函数之间的关系,方便复用

你可能感兴趣的:(canvas基础之 贼酷微信红包图片效果)