Canvas4——图形绘制处理
1、图形组合
globalCompositeOperation = type 属性
**CanvasRenderingContext2D**.globalCompositeOperation属性是 Canvas 2D API 用来绘制新的图形时，设置图形间组合操作的。 每种类型都是一种表示组合或合成方式的字符串。
查看type的各种类型：
（1）在 Canvas Tutorial 中查看 Compositing 章节。
（2）type介绍——查看下面页面的内容：英文原文；中文翻译。
实例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas5</title><script>function draw(id){var canvas = document.getElementById(id);var context = canvas.getContext("2d");var oprtns = new Array("source-atop","source-in","source-out","source-over","destination-atop","destination-in","destination-out","destination-over","lighter","copy","xor")i = 10;context.fillStyle = "blue";context.fillRect(10,10,60,60);context.globalCompositeOperation = oprtns[i];context.fillStyle = "red";context.arc(60,60,30,Math.PI*2,false);context.fill();}</script></head><body onload="draw('canvas')"><canvas id="canvas" width="500" height="500"></canvas></body></html>
2、图形绘制阴影
绘制阴影有四个参数，分别是：shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY.
（1）**CanvasRenderingContext2D**.shadowBlur 是 Canvas 2D API 描述模糊效果程度的属性； 它既不对应像素值也不受当前转换矩阵的影响。 默认值是 0。
语法
ctx . shadowBlur = level ;
-
level
-
描述模糊效果程度的，float 类型的值。默认值是 0。 负数、
Infinity或者NaN都会被忽略。
（2）**CanvasRenderingContext2D**.shadowColor 是 Canvas 2D API 描述阴影颜色的属性。
（3）**CanvasRenderingContext2D**.shadowOffsetX 是 Canvas 2D API 描述阴影水平偏移距离的属性。
（4）**CanvasRenderingContext2D**.shadowOffsetY 是 Canvas 2D API 描述阴影垂直偏移距离的属性。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas7</title><script>function draw(id){var canvas = document.getElementById(id);var context = canvas.getContext("2d");context.fillStyle = "#eeeeef";context.fillRect(0,0,500,500);context.shadowOffsetX = 10;context.shadowOffsetY = 10;context.shadowColor = "rgba(100,100,100,0.5)";context.shadowBlur = 3.5;context.translate(0,50);for(var i=0;i<3;i++){context.translate(100,100);create5Star(context);context.fill();}}function create5Star(context){var dx = 100;var dy = 0;var s = 50;context.beginPath();context.fillStyle = "rgba(255,0,0,0.5)";var x = Math.sin(0);var y = Math.cos(0);var dig = Math.PI/5*4;for(var i = 0;i<5;i++){var x = Math.sin(i*dig);var y = Math.cos(i*dig);context.lineTo(dx+x*s,dy+y*s);}context.closePath();}</script></head><body onload="draw('canvas')"><canvas id="canvas" width="500" height="500"></canvas></body></html>
3、绘制图像
**CanvasRenderingContext2D**.drawImage() 是 Canvas 2D API 提供默认的方式在 canvas 上绘制图片的方法。
void ctx.drawImage(image,dx,dy,dWidth,dHeight);
dx：绘制图像的起始点x；dy：绘制图像的起始点y
dWidth：绘制图像的宽度；dHeight：绘制图像的高度
void ctx.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);
#参数：
（1）image:规定要使用的图像、画布或视频
（2）sx：开始剪切的x坐标位置
（3）sy：开始剪切的y坐标位置
（4）swidth：被剪切图像的宽度
（5）sheight：被剪切图像的高度
（6）dx:在画布上放置图像的x坐标位置
（7）dy:在画布上放置图像的坐标位置
（8）dwidth：要使用图像的宽度
（9）dheight：要使用图像的高度