canvas合成图形、绘制图像、绘制文字与阴影

●合成图形

利用globalCompositeOperation属性来决定图形合成时的效果；
利用globalAlpha属性来设置透明度；
context.globalCompositeOperation = type;
context.globalAlpha = 0.5;
type值：(一部分)
source-over: 新图形覆盖原有图形
destination-over：在原有图形下绘制新图形
source-atop：新图形与原图形重叠部分会被绘制，其他部分变成透明，并覆盖于原有图形之上。
lighter：两图形重叠部分做加色处理
darker：两图形中重叠部分做减色处理
copy: 只有新图形被保留，其他部分被清除
xor: 重叠部分会变成透明

●绘制图像

绘制图像常用drawImage()方法有三种形式：
1：传入一个image对象，目标坐标，在指定位置绘制图像
context.drawImage(image,dx,dy);
2：可以在上一种形式的基础上添加两个参数改变绘制方法
context.drawImage(image,dx,dy,dw,dh);
dw,dh表示绘制图像时的宽度和高度
3：9个参数
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
sx和sy表示源图像的x,y坐标；
sw和sh表示源图像的宽度和高度；
dx和dy表示目标图像的x,y坐标；
dw和dh表示目标图像的宽高；

●绘制文字与阴影

绘制文字

1：font属性： 获取或设置文字的大小
2：textAlign属性： 获取或设置文字对齐方式
3：textBaseline属性： 获取或设置文字的对齐基线
context.fillText(text,x,y)绘制文字；
context.stroketText(text,x,y)对文字进行描边，不填充区域

阴影特效
1：shadowBlur 返回或者设置阴影模糊等级
2：shadowColor 返回或设置阴影颜色
3：shadowOffsetX 返回或者设置阴影的横向偏移量
4：shadowOffsetY 返回或设置阴影的纵向偏移量

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#00f';
    ctx.font = ' 30px sans-serif';
    ctx.textBeseline = 'bottom';
    ctx.fillText("我要绘制的文本",0,59);
    ctx.strokeText("我要绘制的文本",0,100);
    ctx.shadowColor = '#000';
    ctx.shadowOffsetX = 10;// 设置阴影的横向偏移量
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur = 10;// 设置模糊等级
    ctx.fillStyle = 'rgba(0,0,255,1)';
    ctx.fillRect(100,120,200,100);
</script>