在HTML5中有11种组合图形的方式，只要把他们设置到context.globalCompositeOperation中就可以了，我这里做了一个小例子来证明各种图形组合方式的结果

HTML代码很简单，就2个控件，一个是下拉列表，让用户选择组合方式，并且一旦用户做出了选择，就执行js函数draw(id），从而在第二个控件canvas上根据用户当前选择的组合方式进行画图。第二个控件就是一个canvas,用于显示画图的内容。

js函数就是负责响应下拉列表的onchange事件从而在canvas上画图，它先绘制原图形(distination，在这里是一个蓝色正方形)，然后取得用户选择的组合方式，再根据此方式画出新图形（source,在这里是一个红色的圆）：

实验可以根据你用户的选择来显示不同结果：

这里的source是红色的圆（新图形），distination是蓝色正方形（旧图形）