实验代码如下：

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(); } }

vcfQx8D919M=" src="/uploadfile/Collfiles/20160607/20160607091105429.png" />

绘制图像

绘图：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：画出来的高度 最后一个方法可能比较拗，还是上图吧，一图胜千言:

//drawImage(image,x,y) function draw28(id) { var image = new Image(); image.src = "Image/html5.jpg"; var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); image.onload = function () { context.drawImage(image,0,0); } } //drawImage(image,x,y,w,h) function draw12(id) { var image = new Image(); image.src = "Image/html5.jpg"; var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); image.onload = function () { context.drawImage(image, 50, 50, 300, 200); } } //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) function draw13(id){ var image = new Image(); image.src = "Image/html5.jpg"; var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); image.onload = function () { context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸 } }

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

type: no-repeat:不平铺 repeat-x:横方向平铺 repeat-y:纵方向平铺 repeat:全方向平铺