绘制大波浪进度图会用到：
| ctx.globalCompositeOperation = "destination-atop"; |
destination-atop意义：画布上已有的内容只会在它和新图形重叠的地方保留。新图形绘制于内容之后。
当然，globalCompositeOperation还有很多选项，这里不一一列举，大家可以试试设置其他的属性来调整出很酷炫的叠加特效。
整体实现
| var img = new Image(); function tick() { ... ... ctx.fill(); ctx.globalCompositeOperation = "destination-atop"; ctx.drawImage(img, 0, 0); requestAnimationFrame(tick); } img.onload = function () { tick(); }; img.src = "asset/alloy.png"; |
为了代码简单直接，这里免去了封装一个加载器的代码，直接通过new Image来设置src来加载图片。
在绘制完矢量图之后，设置globalCompositeOperation，然后再绘制企鹅图片，绘制顺序不能搞错。
最后
实例下载：demo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
