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

context . setTransform ( m11 , m12 , m21 , m22 , dx , dy )//重设当前的转换到

context .transform ( m11 ,m12 ,m21 ,m22 ,dx ,dy )

// 矩阵变换，结果等于当前的变形矩阵乘上

m11 m21 dx

m12 m22 dy

00 1

后的结果

context . translate ( x , y ) // 可以理解为偏移，向 x,y 方向偏移指定的量,动 其用来移动Canvas 的原点到一个指定的值。

12.3.3 颜色和风格

context .fillStyle [ =value ]

// 返回填充形状的当前风格，能被设

是 置以用来改变当前的填充风格， 其值可以是 CSS 颜色字串， 也可以是 CanvasGradient 者 或者CanvasPattern 对象，非法的值将被忽略。

context .strokeStyle [ =value ]

// 返回当前描绘形状的风格，能被设置，其值同上。canvas实例

设置 Javascript 例子如下：

context.strokeStyle="#99cc33";

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

context.lineWidth=10;

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

context.strokeRect(20,20,100,100);

绘制的图形如下所示：

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

上面提到的还有 CanvasGradient 对象，规范规定有两类渐变类型，线性渐变和径向渐变。

gradient .addColorStop ( offset ,color )

// 在给定偏移的地方增为 加一个渐变颜色点，偏移量取值范围为 0-1.0 之间，否则产生一个 INDEX_SIZE_ERR，的异常，color 为 为 DOM 字符串，如果不能解析，则抛出一个 SYNTAX_ERR 的异常

gradient =context .createLinearGradient ( x0 ,y0 ,x1 ,y1 )

// 建立一个线性渐变，如果任何一个参数不是有限值，则抛出一个 NOT_SUPPORTED_ERR 的异常。

gradient = context . createRadialGradient ( x0 , y0 ,r0 , x1 , y1 ,r1 )

// 建立一个径向渐变，如果任何一个参数不是有限值，则抛出一个 NOT_SUPPORTED_ERR 的异常。假如 r0 或 或 r1为负值，则抛出INDEX_SIZE_ERR。

设置 Javascript 例子如下：

var gradient =

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

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

gradient.addColorStop(0.5,'rgba(0,200,0,0.7)');

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

context.strokeStyle="#99cc33";

context.lineWidth=10;

context.fillRect(20,20,400,100);

context.strokeRect(20,20,400,100);

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