3：Canvas绘图（下）1.在canvas上合成Synthesis是指如何精细地控制canvas上对象的透明度和层次效果。有两个属性控制合成操作：globalAlphaglobalAlphaCanvas属性用来表示透明度，它的默认值是1.0（完全不透明），可以设置值从0.0到1.0，这个Canvas属性必须在绘制图形之前设置.globalCompositeOperationglobalCompositeOperation属性用于显示分层效果。它的值控制在globalAlpha和所有变换生效后在当前画布位图中绘制图形。取值如下：代码示例如下：functioncompound(){context.globalAlpha=.8;context.fillStyle='#000000';context.fillRect(200,0,200,200);context.fillStyle='#c70711';context.globalAlpha=.9;context.globalCompositeOperation="source-over";context.fillRect(180,0,50,50);context.fillStyle='#650ec7';context.globalAlpha=.9;context.globalCompositeOperation="destination-over";context.fillRect(370,0,50,50);}显示效果如下：2.画布上的变换画布变换是指用数学方法调整绘制图形的物理属性。旋转和缩放是两种常用的变换。1）旋转和平移变换我们先来看一个概念，变换矩阵。画布上的每个对象都有一个当前变换矩阵。transform()方法替换了当前的变换矩阵，它允许您缩放、旋转、移动和倾斜当前环境。.它用下面描述的矩阵来操作当前的变换矩阵：acebdf001参数值如下：代码如下：functionrotaterect(){context.globalAlpha=.6;context.transform(1,0.5,-0.5,1,30,10);context.fillStyle='#c70711';context.fillRect(180,0,50,50);}效果如下：2）可以使用scale函数进行缩放变换。scale()函数有两个参数，第一个是x轴的缩放属性，第二个是y轴的缩放属性，普通物体的缩放尺寸的值都是1。代码示例：functionscalerect(){context.globalAlpha=.6;context.scale(2,2);context.fillStyle='#c70711';context.fillRect(80,0,50,50);}显示结果：
