如：

if (drawing.getContext) { var context = drawing.getContext("2d"); //设置阴影 context.shadowColor ="red"; //阴影颜色 context.shadowOffsetX = 10; //x轴偏移 context.shadowOffsetY = 10; //y轴偏移 context.shadowBlur = "100"; //阴影模糊的像素 //绘制矩形 context.fillStyle = "orange"; context.fillRect(0,0,300,200); } 渐变

渐变由CanvasGradient实例表示,调用

createLinearGradient()方法,此方法接收4个参数:起点的x坐标,起点的y坐标,终点的x坐标,终点的y坐标.调用这个方法后,它就会创建一个指定大小的渐变,并返回CanvasGradient对象实例.

创建了渐变对象后,下一步就是使用

addColorStop()方法来指定色标.接收两个参数:色标位置和CSS颜色值.色标位置是一个0(开始的颜色)到1(结束的颜色)之间的数字.

如：

var drawing = document.getElementById("drawing"); var img = document.images[0]; // 确定浏览器是否支持canvas元素 window.onload = function() { if (drawing.getContext) { var context = drawing.getContext("2d"); //创建渐变 var gradient = context.createLinearGradient(0, 100, 200, 100); gradient.addColorStop(0, "red"); gradient.addColorStop(1, "orange"); //将渐变运用到矩形 context.fillStyle = gradient; context.fillRect(0,0,200,100); } };

如果要绘制非常准确的渐变矩形，则可以使用下面的函数：

function createRectLinearGradient(context, x, y, width, height) { return context.createLinearGradient(x, y, x + width, y + height); }

如：

function createRectLinearGradient(context, x, y, width, height) { return context.createLinearGradient(x, y, x + width, y + height); } var gradient = createRectLinearGradient(context, 0, 0, 200, 100); gradient.addColorStop(0, "red"); gradient.addColorStop(1, "orange"); context.fillStyle = gradient; context.fillRect(0, 0, 200, 100);

要创建径向渐变，就要调用

createRadialGradient()方法，接收6个参数：起点圆的圆心及半径（前三个参数）；终点圆的圆心及半径（后三个参数）：

如：

//移动原点 context.translate(50, 50); //创建径向渐变 var gradient = context.createRadialGradient(-20, -20, 10, 20, 20, 10); gradient.addColorStop(0, "red"); gradient.addColorStop(1, "orange"); //填充矩形 context.fillStyle = gradient; context.fillRect(-100, -100, 400, 400); 模式

模式就是重复的图像,可以用来填充或描边图形.要创建一个新模式,可以调用：

createPattern()方法并传入两个参数:一个HTMLimg元素和一个表示如何重复图像的字符串.

其中,第二个参数的值与CSS的background-repeat属性值相同,包括"repeat","repeat-x","repeat-y","no-repeat"；另外，该方法的第一个参数也可以传入video元素以及另一个canvas元素；

var context = drawing.getContext("2d"); //定义pattern var pattern = context.createPattern(img,"repeat"); //填充 context.fillStyle = pattern; context.fillRect(0,0,600,500); 使用图像数据

通过

getImageData()取得原始图像数据.这个方法接收4个参数:要取得其数据的画面区域的x和y坐标以及该区域的像素宽度和高度:

setImageData()则根据图像数据，在canvas中绘制出来

如：

window.onload = function() { var drawing = document.getElementById("drawing"); var imgInput = document.images[0]; //检查兼容性 if (drawing.getContext) { var context = drawing.getContext("2d"); //绘制原始图像 context.drawImage(imgInput, 0, 0); //取得图像数据 var imageData = context.getImageData(0, 0, imgInput.width, imgInput.height); var data = imageData.data; for (var i = 0, len = data.length; i < len; i+=4) { //i应该是0,4,8... var red = data[i]; //0,4,8... var green = data[i + 1]; //1,5,9... var blue = data[i + 2]; //2,6,10... var alpha = data[i + 3]; //3,7,11 //求得rgb平均值 var average = Math.floor((red + green + blue) / 3); //设置颜色值，透明度不变 data[i] = average; data[i + 1] = average; data[i + 2] = average; } //回写数据并显示结果 imageData.data = data; context.putImageData(imageData, 0, 0); } };