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

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

渐变

方法	说明
createLinearGradient(x1,y1,x2,y2)	创建线性渐变对象，参数是两个点的坐标，确定线性渐变方向
createRadialgradient(x1,y1,r1,x2,y2,r2)	创建放射渐变对象，参数是启示圆坐标和半径、终止圆坐标和半径
adColorStop（stop，color）	定义一个渐变位置的范围和颜色，stop介于0.0到1.0，color为颜色

 

一个例子：

vargrd=dw.createLinearGradient(0,60,120,0);

grd.addColorStop(0,"black");

grd.addColorStop("0.3","blue");

grd.addColorStop("0.7","red");

grd.addColorStop(1,"yellow");

dw.fillStyle=grd;

dw.fillRect(20,20,150,100);

 

阴影

方法	说明
shadowColor	设置或返回阴影的颜色
shadowBlur	设置或返回阴影的模糊程度
shadowOffsetX	设置或返回阴影距形状的水平距离，可为负
shadowOffsetY	设置或返回阴影距形状的垂直距离，可为负

 

一个例子：

dw.shadowColor="black";

dw.fillStyle="red";

dw.shadowBlur=10;

dw.shadowOffsetY=10;

dw.fillRect(20,20,100,80);

 

转换 （类似于CSS的 变形transform，关键字都一样，用法也一样）

方法：

Scale	缩放、反转效果，传入两个参数，允许负值，会影响到之后所有的操作，使用完毕后要恢复
translate	平移效果
Rotate	旋转效果，传入参数是弧度，不是角度，和CSS不同
Transform	矩形转换，所有转换都通过这个方法实现，计算很麻烦

 

图像合成方式

方法：globalCompositionOperation

通过设置不同的参数，实现图像叠加不同效果，比如z-index的重叠效果

 

参数有：

source-over

Source-atop

Source-in

Source-out

Destination-over

Destination-atop

Destination-in

Destination-out

Lighter

copy