HTML5教程画布Canvas基础知识讲解，html5学习网(2)_H5之家

ImageData对象保存了图像像素值。每个对象有三个属性: width,height和data。data属性类型为CanvasPixelArray，用于储存width*height*4个像素值。每一个像素有RGB值和透明度alpha值(其值为0至255，包括alpha在内。)。像素的顺序从左至右，从上到下，按行存储。mYCHTML5中文学习网 - HTML5先行者学习网

来看一个例子：mYCHTML5中文学习网 - HTML5先行者学习网

1 var imgd = context.createImageData(50,50);

2 var pix = imgd.data;

3 for (var i = 0; n = pix.length, i < n; i += 4) {

4 pix[i ] = 255;

5 pix[i+3] = 127;

6 }

7 context.putImageData(imgd, 0,0);

注意：不是所有浏览器都实现了createImageData。在支持的浏览器中，需要通过getImageData方法获取ImageData对象。mYCHTML5中文学习网 - HTML5先行者学习网

通过ImageData可以完成很多功能。如可以实现图像滤镜，或可以实现数学可视化 (如分形和其他特效)。来看一个实例：mYCHTML5中文学习网 - HTML5先行者学习网

1 var imgd = context.getImageData(x, y width, height);

2 var pix = imgd.data;

3 for (var i = 0, n = pix.length; i < n; i += 4) {

4 pix[i ] = 255 - pix[i ];

5 pix[i+1] = 255 - pix[i+1];

6 pix[i+2] = 255 - pix[i+2];

7 }

8 context.putImageData(imgd,x, y);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。mYCHTML5中文学习网 - HTML5先行者学习网

文字

虽然最近的WebKit版本和Firefox 3.1 nightly build才开始支持Text API，为了保证文章完整性我决定仍在这里介绍文字API。mYCHTML5中文学习网 - HTML5先行者学习网
context对象可以设置以下text属性：mYCHTML5中文学习网 - HTML5先行者学习网

font：文字字体，同CSS font-family属性；mYCHTML5中文学习网 - HTML5先行者学习网

textAlign：文字水平对齐方式。可取属性值: start,end,left,right,center。默认值：start；mYCHTML5中文学习网 - HTML5先行者学习网

textBaseline：文字竖直对齐方式。可取属性值：top,hanging,middle,alphabetic,ideographic,bottom。默认值：alphabetic。mYCHTML5中文学习网 - HTML5先行者学习网

有两个方法可以绘制文字：fillText和strokeText。第一个绘制带fillStyle填充的文字，后者绘制只有 strokeStyle边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y)坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。mYCHTML5中文学习网 - HTML5先行者学习网

文字对齐属性影响文字与设置的(x,y)坐标的相对位置。mYCHTML5中文学习网 - HTML5先行者学习网

1 ontext.fillStyle = '#00f';

2 context.font = 'italic 30px sans-serif';

3 context.textBaseline = 'top';

4 context.fillText ('Hello world!', 0, 0);

5 context.font = 'bold 30px sans-serif';

6 context.strokeText('Hello world!', 0, 50);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。mYCHTML5中文学习网 - HTML5先行者学习网

阴影

目前只有Konqueror和Firefox 3.1 nightly build支持Shadows API。API的属性为：shadowColor：阴影颜色。其值和CSS颜色值一致。mYCHTML5中文学习网 - HTML5先行者学习网

shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和Photoshop的高斯模糊滤镜相同。mYCHTML5中文学习网 - HTML5先行者学习网

shadowOffsetX和shadowOffsetY：阴影的x和y偏移量，单位是像素。mYCHTML5中文学习网 - HTML5先行者学习网

1 context.shadowOffsetX = 5;

2 context.shadowOffsetY = 5;

3 context.shadowBlur = 4;

4 context.shadowColor = 'rgba(255, 0, 0, 0.5)';

5 context.fillStyle = '#00f';

6 context.fillRect(20, 20, 150, 100);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。mYCHTML5中文学习网 - HTML5先行者学习网

颜色渐变

除了CSS颜色， fillStyle和strokeStyle属性可以设置为CanvasGradient对象。——通过CanvasGradient可以为线条和填充使用颜色渐变。mYCHTML5中文学习网 - HTML5先行者学习网

欲创建CanvasGradient对象，可以使用两个方法：createLinearGradient和createRadialGradient。前者创建线性颜色渐变，后者创建圆形颜色渐变。mYCHTML5中文学习网 - HTML5先行者学习网

创建颜色渐变对象后，可以使用对象的addColorStop方法添加颜色中间值。mYCHTML5中文学习网 - HTML5先行者学习网

下面的代码演示了颜色渐变使用方法：mYCHTML5中文学习网 - HTML5先行者学习网

1 var gradient1 = context.createLinearGradient(sx,sy,dx,dy);

2 gradient1.addColorStop(0, '#f00');

3 gradient1.addColorStop(0.5, '#ff0');

4 gradient1.addColorStop(1, '#00f');

5 var gradient2 = context.createRadialGradient(sx,sy,sr,dx,dy, dr);

可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。mYCHTML5中文学习网 - HTML5先行者学习网

小结mYCHTML5中文学习网 - HTML5先行者学习网