CSS3一览（3） Canvas画布（3）

CSS3的新功能我也看了一一些，做了一个简要的笔记，总结一下，当成学习笔记发上来，这是CSS3的第五篇了。

绘制图片

使用的是方法drawImage（）  像这样dw.drawImgage(img,20,0)

drawImage方法参数

参数

说明

Img

要绘制使用的图像、视频或画布，可以是一个Image()对象，也可以是一个DOM对象

X

画布上绘制图像的起始点x坐标

Y

画布上绘制图像的起始点y坐标

Sx

可选，开始剪裁的X坐标

Sy

可选，开始剪裁的Y坐标

Swidth

可选，被剪裁的图像宽度

Sheight

可选，被剪裁的图像高度

Width

可选，要使用的图像宽度（缩放）

Height

可选，要使用的图像高度（缩放）

 

可选参数使用的不同可以得到图像缩放、图像裁剪的不同想过，一般有以下三种

Dw.drawImage（img,x,y）//只绘制一个图像

Dw.drawImage（img,x,y,width,height）//根据width和height绘制一个拉伸的图像

Dw.drawImage（img,sx,sy,swidth,sheight,x,y,height）//裁剪一个图片

 

像素操作

通过方法getImageData得到指定范围内的图像像素信息，处理后，通过方法putImageData方法绘制到画布上

• getImageData(x,y,widht,height)方法得到从起始点（x,y），宽width，高height的矩形范围内的像素信息
• putImageData参数说明

参数

说明

imgData

要放回画布的ImageData对象

X

ImageData对象左上角x坐标，以像素计算

Y

ImageData对象左上角y坐标，以像素计算

dirtyX

可选，水平值（x），以像素计算，画布上放置图像的位置

dirtyY

可选，水平值（y），以像素计算，画布上放置图像的位置

Width

可选，在画布上绘制所用的宽度

Height

可选，在画布上绘制所使用的高度

 

一个例子：

vardw=document.getElementById('canvas').getContext('2d');

varimg=new Image();

img.src="1.jpg";

img.onload=function(){

dw.drawImage(img,0,0,300,200);

}

varimgData=dw.getImageData(0,0,300,200)

for(vari=0,n=imgData.data.length;i<n;i+=4){

//因为一个像素由RGBA值共四个，所以for循环处理一个像素需要操作data[i]-data[i+3]

imgData.data[i]=255;

imgData.data[i+1]=255;

imgData.data[i+2]=255;

imgData.data[i+3]=255;

}

dw.putImageData(imgData,355,0);

 

通过像素级操作，也可以实现滤镜、透明、渐变、翻转等效果

 

压缩图像

使用方法如下：

vardw=document.getElementById('canvas').getContext('2d');

var img=new Image();

img.src="1.bmp";

img.onload=function(){

dw.drawImage(img,0,0,300,200);

}

vardata=document.getElementById("canvas").toDataURL("image/jpeg");

varel=document.createElement("img");

el.src=data;

document.getElementByTagName("body")[0].appendChild(el);