canvas 使用遇到过的问题

使用ctx.clip()之后每次重绘都是同一张图片

 

刚开始思考是不是需要每次先清除画布再绘制  ctx.clearRect() 发现还是不行  然后调整代码顺序  ,一行一行代码注释 看是哪个的问题 发现是clip()的问题     

 

 

 

思考良久    

 

 

后面想了一下  百度看一下clip()的语法     有网友说

 

 

 试了一下 OK

 

ctx.save();

ctx.arc((rect.width / 2 - 17) + 20, 40, 20, 0, Math.PI * 2, false);

ctx.setStrokeStyle('rgba(0,0,0,0)')

ctx.stroke();

ctx.clip();

ctx.drawImage(avaterSrc, rect.width / 2 - 17, 20, 40, 40);

ctx.restore();

 

 

总结一下: 首先要定位问题  然后查看相关api 了解语法和原理  上下文关联  查看api相关的资料 (就是你用这个api,你得知道这个api的作用和影响)