window.onload = function(){ ); if(drawing.getContext) { context = drawing.getContext(); var image = document.images[0]; //参数依次表示为：图像元素、源图像x坐标、y坐标、目标的宽度、高度 context.drawImage(image, 0, 0, 150, 250); //参数依次表示为：图像元素、源图像x坐标、y坐标、源图像宽度、高度、目标图像x坐标、y坐标、目标图像宽度、高度 context.drawImage(image, 100, 300, 500, 600, 0, 0, 70, 80); } };

 　　模式与渐变一样，都是从画布原点（0,0）开始的，将填充样式设置为模式对象，只表示在某个特定区域内显示重复的图像，而不是从某个位置开始绘制重复的图像。

　　 createPattern（）第一个参数也可以是<video>元素，或者是另一个<canvas>元素

window.onload = function(){ ); if(drawing.getContext) { context = drawing.getContext(); context.shadowColor = ;//阴影颜色，默认黑色 context.shadowOffsetX = 5;//x轴方向的阴影偏移量，默认0 context.shadowOffsetY = 5;//y轴方向的阴影偏移量，默认0 context.shadowBlur = 4;//模糊的像素数，默认0 context.fillStyle = ; context.fillRect(10, 10, 50, 50); context.fillStyle = ; context.fillRect(30, 30, 50, 50); gradient = context.createLinearGradient(100, 10, 130, 130);//创建线性渐变，返回CanvasGradient对象的实例。参数：起点x坐标、y坐标、终点x坐标、y坐标 gradient.addColorStop();//指定色标，参数：色标位置（0到1之间的数字，0表示开始的颜色，1为结束的颜色）、css颜色值 gradient.addColorStop(); context.fillStyle = gradient; context.fillRect(100, 10, 50, 50); var createLinearGradient = function(context, x, y, width, height) { return context.createLinearGradient(x, y, x+width, y+height); }; var gradientNew = createLinearGradient(context, 180, 10, 50, 50); gradientNew.addColorStop(); gradientNew.addColorStop(); context.fillStyle = gradientNew; context.fillRect(180, 10, 50, 50); var gradientRound = context.createRadialGradient(275, 35, 10, 275, 35, 30);//径向渐变,参数：起点圆的圆心、半径，终点圆的圆心、半径 gradientRound.addColorStop(); gradientRound.addColorStop(); context.fillStyle = gradientRound; context.fillRect(250, 10, 50, 50); image = document.images[0], pattern = context.createPattern(image, );//创建新模式，参数：图像元素、是否重复（repeat、repeat-x、repeat-y、no-repeat） context.fillStyle = pattern; context.fillRect(350, 10, 350, 350); } }

　　getImageData()可取得原始图像数据，参数：要取得数据的画面区域的x坐标、y坐标、宽度、高度。返回的对象是ImageData的实例，该对象有3个属性：width、height和data。其中data为数组，保存着图像中

每一个像素的数据，每一个像素用4个元素来表示，分别表示红、绿、蓝和透明度值。因此，第一个像素的数据保存在数组的第0到第3个元素中。

　　注意：只有在画布“干净”的情况下（即图像并非来自其他域），才可以取得图像数据。

　　globalAlpha：介于0和1之间的值（包括0和1），用于指定透明度，默认为0。

　　globalComositionOperation：表示后绘制的图形怎样与先绘制的图形结合。

3、WebGL

　　WebGL是针对canvas的3D上下文，并不是由W3C制定的标准。

本文持续更新中~