canvas实例扫地僧 北邮 web(4)

绘制的图形如下所示。

北邮web前端课程之Canvas画布" />

更改

var gradient =

context.createLinearGradient(0,2,420,2);

为

var gradient =

context.createLinearGradient(0,2,420,200);

则绘制图形如下：

北邮web前端课程之Canvas画布" />

细心的读者会发现，此方法与 PHOTOSHOP 软件中的渐变工具类似。

注：如果 X0=X1,Y0=Y1,则绘制动作什么也不做，自己改改例子试试吧。

createRadialGradient(x0,y0,r0,x1,y1,r1)方法有六个参数，前三个参数表示开始的圆，其圆点在(x0,y0),半径为 r0，后三个表示结束的圆，参数意义同上。其绘制过程如下：

1．如果起始圆和结束圆重叠，则不绘制任何东西，并终止步骤；

2． x(w) = (x1-x0)w + x0

y(w) = (y1-y0)w + y0

r(w) = (r1-r0)w + r0

在以（x(w),y(w)）为圆点，r(w)为半径的圆周上所有点的颜色均为Color(w)。

3．对于任意的 w 取值(-∞ -- +∞)，确保r(w)>0,总是可以知道画布

中

已知点的颜色，

简而言之，言而总之：这个效果就是建立一个圆锥体（手电筒效果）渲

染效果，圆锥体的开始圆使用开始颜色偏移量为 0，圆锥体的结束圆使

用颜色偏移量为 1.0，面积外的颜色均使用透明黑。

设置 Javascript 例子如下：

var gradient =

context.createRadialGradient(100,100,20,300,300

,80);

gradient.addColorStop(0,'rgba(200,0,0,0.8)');

gradient.addColorStop(1,'rgba(200,0,200,0.9)');

context.strokeStyle="#99cc33";

context.fillStyle= gradient;//'rgba(50,0,0,0.7)';

context.lineWidth=10;

context.fillRect(10,10,400,400);

context.strokeRect(10,10,400,400);

绘制的图形如下所示:

北邮web前端课程之Canvas画布" />

上面提到可以作为渲染风格还有图案对象:CanvasPattern,其调用格式如

下：

pattern =context .createPattern ( image ,repetition )

本方法用指定的图像和重复方向建立一个画布图案对象，image 参数可

以为 img,canvas,video 元素中的任一个，如果不满足此条件，则抛出 TYPE_MISMATCH_ERR异常，如果图片编码未知或没有图像数据，则抛出 INVALID_STATE_ERR 异常；第二个参数可以是下列值：

如果 image 参数是一个 HTMLImageElement 对象，但对象的 complete 属性是 false，则执行时抛出INVLAID_STATE_ERR 异常；

如果 image 参数是一个 HTMLVideoElement 对象，但其 readyState 属性是 HAVE_NOTHING 或HAVE_METADATA，则执行时抛出抛出 INVLAID_STATE_ERR 异常；

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-64820-4.html