canvas打造QQ空间广告

canvas打造QQ空间广告

在QQ空间中，我们经常可以看到某州学院的广告，当你滑下去时，会有一个圆形蒙版出现，并且会随着手指的滑动而变大或者变小。

依赖技术

这里的主要实现是利用canvas的2D绘图能力，会主要讲解drawImage与clip两个API的作用与原理。

效果

实现过程

1. canvas绘制的准备

   ​ 在网上有很多的canvas的基础教程，这里不做过多讲解。直接Ctrl+c Ctrl+v

   <div class="view" id="bb">//用来做背景层的显示
   <canvas id="canvas" ></canvas>
   </div>

   ​ 背景的图层显示使用css显示，因为背景层不需要重绘，所以使用css来显示，减少canvas的渲染调用。

2. 初始化我们的画布

   var canvas = document.getElementById("cas"), 
   ctx = canvas.getContext(