网易前端面试题目，HTML5(六)—，成功入职阿里月薪45K

}

function next(){

ctx.clearRect(0,0,canvas.width,canvas.height)

if(frameCounter%5 == 0){ //frameCounter 控制动画速度

i++

if(i==11)i=0

}

ctx.drawImage(img,

0,i*240,240,240,

0,0,240,240) // 每张图片宽高都是240，具体参数根据图片而定

frameCounter ++

if(!pause)requestAnimationFrame(next)

}

window.onclick = function(){

pause = !pause

next()

}

eg：使用 canvas 画布处理视频，使用定时器绘制视频的当前帧，连续起来就是一个视频，需要注意的是必须处理暂停和开始播放两种操作，具体代码如下：

var v=document.getElementById(“video1”);

var c=document.getElementById(“myCanvas”);

ctx=c.getContext(‘2d’);

v.addEventListener(‘play’,function() {var i=window.setInterval(function()

{ctx.drawImage(v,0,0,270,135)},20);},false);

v.addEventListener(‘pause’,function() {window.clearInterval(i);},false);

v.addEventListener(‘ended’,function() {clearInterval(i);},false);

三、像素级操作

=======

常见的像素级的操作有三种：

• getImageData() - 获取画布像素数据

• createImageData() - 创建新的、空白像素

• putImageData() - 图像像素数据放回画布

3.1、getImageData

使用语法：getImageData( x , y , width , height )

• x：要被提取的图像数据矩形区域的左上角 x 坐标。

• y：要被提取的图像数据矩形区域的左上角 y 坐标。

• width：被提取的图像数据矩形区域的宽度

• height：被提取的图像数据矩形区域的高度

返回一个 imageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过像素表示，起点是( x , y )，宽高为 widht 和 height 。

imageData 对象包含三个属性：

• imageData.height - 像素描述的矩形实际高度。

• imageData.width - 像素描述的矩形实际宽度。

• imageData.data - 包含 rgba 顺序数据的一个数组，数据使用0-255直接整数表示。

3.2、createImageData

使用语法：

createImageData( width , height )

创建一个空白的 imageData 对象，新对象的默认像素值 transparent black。对于imageData对象中的每个像素值，都存在 rgba 这四方面的信息，即：

• r - 红色（0-255）

• g - 绿色（0-255）

• b - 蓝色（0-255）

• a - alpha（0-255,0是透明，255是完全可见）

新对象默认像素值为（0,0,0,0）。

eg：如果我们想把 imageData 中一个像素变为红色时，可以改变第一和第四位信息，代码如下：

var imageData = ctx.createImageData(100,100)

imageData.data[0] = 255

imageData.data[1] = 0

imageData.data[2] = 0

imageData.data[3] = 255

3.1、putImageData

使用语法：

putImageData( imgData , x , y , dirtyX , dirtyY , dirtyWidth ,dirtyHeight );

参数及意义：

参数	描述
imgData	规定要放回画布的 ImageData 对象。
x	ImageData 对象左上角的 x 坐标，以像素计。
y	ImageData 对象左上角的 y 坐标，以像素计。
dirtyX	可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY	可选。水平值（y），以像素计，在画布上放置图像的位置。
dirtyWidth	可选。在画布上绘制图像所使用的宽度。
dirtyHeight	可选。在画布上绘制图像所使用的高度。

通过 getImageData 复制的指定矩形像素数据，编辑之后，通过 putImageData 方法将图像数据放回画布上。

eg：添加滤镜效果：上述兔子是白色的变换成红色兔子，这时需要把绿色和蓝色都设置成0即可，代码如下：