context.rotate(θ)等同于
context.transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180), -Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，0，0）
或
context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)， Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180), 0，0）

图形组合 

context.globalCompositeOperation=type

图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了

type：

source-over（默认值）：在原有图形上绘制新图形

destination-over：在原有图形下绘制新图形

source-in：显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色

destination-in：显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色

source-out：只显示新图形非交集部分

destination-out：只显示原有图形非交集部分

source-atop：显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色

destination-atop：显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色

lighter：原有图形和新图形都显示，交集部分做颜色叠加

xor：重叠飞部分不现实

copy：只显示新图形

文字看得人眼花缭乱，特意画图一张：回头一看惊觉打错字，图片的原型为圆形，你懂的- -

以下为实验代码

function draw10(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext("2d"); var oprtns = new Array( "source-over", "destination-over", "source-in", "destination-in", "source-out", "destination-out", "source-atop", "destination-atop", "lighter", "xor", "copy" ); var i = 0;//组合效果编号 //结合setinterval动态显示组合 var interal = setInterval(function () { if (i == 10) { i=0; } else { i++; } //蓝色矩形 context.fillStyle = "blue"; context.fillRect(10, 10, 60, 60); //设置组合方式 context.globalCompositeOperation = oprtns[i]; //设置新图形（红色圆形） context.beginPath(); context.fillStyle = "red"; context.arc(60, 60, 30, 0, Math.PI * 2, false); context.fill(); }, 1000); }

结果是动态的切换各种组合

给图形绘制阴影 

context.shadowOffsetX ：阴影的横向位移量（默认值为0）

context.shadowOffsetY ：阴影的纵向位移量（默认值为0）

context.shadowColor ：阴影的颜色

context.shadowBlur ：阴影的模糊范围（值越大越模糊）

先来个简单的例子

function draw27(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = 'rgba(100,100,100,0.5)'; context.shadowBlur = 1.5; context.fillStyle = 'rgba(255,0,0,0.5)'; context.fillRect(100, 100, 200, 100); }

再来个书本上的五角星的例子

function create5Star(context) { var n = 0; 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(); } function draw11(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = 'rgba(100,100,100,0.5)'; context.shadowBlur =5; //图形绘制 context.translate(0, 50); for (var i = 0; i < 3; i++) { context.translate(50, 50); create5Star(context); context.fill(); } }

绘制图像  

绘图：context.drawImage

图像平铺：context.createPattern(image,type)

图像裁剪：context.clip()

像素处理：var imagedata=context.getImageData(sx,sy,sw,sh)

绘图 context.drawImage

context.drawImage(image,x,y)

image：Image对象var img=new Image(); img.src="url(...)";

x：绘制图像的x坐标

y：绘制图像的y坐标

context.drawImage(image,x,y,w,h)

image：Image对象var img=new Image(); img.src="url(...)";

x：绘制图像的x坐标

y：绘制图像的y坐标

w：绘制图像的宽度

h：绘制图像的高度

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)：选取图像的一部分矩形区域进行绘制

image：Image对象var img=new Image(); img.src="url(...)";

sx：图像上的x坐标

sy：图像上的y坐标

sw：矩形区域的宽度

sh：矩形区域的高度

dx：画在canvas的x坐标

dy：画在canvas的y坐标

dw：画出来的宽度

dh：画出来的高度

最后一个方法可能比较拗，还是上图吧