canvas笔记-clip裁剪函数的使用及探照灯实例

在canvas中有clip函数，也就是裁剪，从原始画布中剪切任意形状和尺寸。

 

如下例子：

    
    




    当前浏览器不支持canvas

程序运行截图如下：

添加clip代码后运行截图如下：

源码如下:

 

下面记录下探照灯的例子：

程序运行截图如下，那个探照灯的圆是会动的。

源码如下：

    
    




    当前浏览器不支持canvas

这里说明下实现的逻辑，碰撞检测，清空画布方面的不提了。

就提下这个draw。

这里是先绘制出了一个全黑的矩形，这个矩形和画布一样大。然后再绘制一个圆，这个圆是白色的，然后裁剪，这样的画，显示的时候就只会显示圆。然后就搞3个canvas字绘制到画布上。再加上运动效果，就变成探照灯实例了。