HTML5 Canvas 教程：十、合成

十、合成 Composites

 

10.1阴影 Shadows

 

要用HTML5画布添加阴影，可以使用画布上下文对象的shadowColor、shadowBlur、shadowOffsetX和shadowOffsetY属性。

 

  

    

  

  

     id="myCanvas" width="578" height="200">

    

  

 

以上代码演示了在画布上绘制一个矩形，并设置阴影参数。

 

 

10.2透明度 Alpha

 

为了用HTML5画布设置元素的不透明度，我们可以将画布上下文的globalAlpha属性设置为0到1之间的实数，其中0是完全透明的，1是完全不透明的。

 

  

    

  

  

     id="myCanvas" width="578" height="200">

    

  

 

以上代码演示了在画布上重叠两个半透明的图形。

 

 

10.3剪辑区域 Clipping Region

 

若要使用HTML5画布定义剪辑区域，可以绘制路径，然后使用上下文对象的clip()方法。随后绘制的所有图形将被绑定在剪辑区域内。一旦我们在裁剪区域内完成了绘图，可以使用restore()方法将画布上下文返回到其原始状态，以便进一步的绘图不绑定到裁剪区域。

 

在本教程中，我们将通过绘制一个圆，然后使用clip()来定义一个圆形裁剪区域，然后绘制几个在圆形路径内裁剪的圆。接下来，我们将使用restore()方法将画布上下文恢复到其原始状态，然后在原始剪辑区域周围绘制一个环。

 

  

    

  

  

     id="myCanvas" width="578" height="200">

    

  

 

以上代码演示了在画布上设置状态保存点，然后设置剪辑区域，然后在剪辑区域内绘图，然后恢复到保存点，并用蓝色为剪辑区域描边。

 

 

10.4全局合成操作 Global Composite Operations

 

要使用HTML5画布执行合成操作，可以使用画布上下文的globalCompositeOperation属性。此属性定义画布的源和目的地状态之间的合成操作。目的地定义为合成操作之前的画布状态，源定义为复合操作后的画布状态。

 

可以执行十二个种合成操作之一，包括：source-atop、source-in、source-out、source-over、destination-atop、destination-in、destination-out、destination-over、lighter、xor和copy。除非另有声明，否则默认的复合操作为source-over。

 

需要注意的是，画布上下文只能在整个生命周期中支持一次合成操作。如果想要使用多次合成操作，要如本教程所示，首先在一个不可见的画布上进行绘图操作，然后将绘制结果复制到可见画布上。

 

  

    

  

  

     id="myCanvas" width="578" height="430">

    

  

 

以上代码演示了创建不可见的临时画布，并在临时画布上分别执行不同类型的多次合成操作，并将绘制内容复制到可见画布的过程。本例也演示了不同的合成操作之间的差异。

 

对于这种首先在不可见画布绘图然后再复制到可见画布的操作，又称之为双缓冲区机制double buffer，其特点是在绘制过程中不会影响可见画布的显示，在很多其他开发语言入Java中，这种影响主要是指画面闪烁。