canvas实例 扫地僧 北邮 web 前端课程之 Canvas 画布(3)

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

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

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

m11 m21 dx

m12 m22 dy

0 0 1

后的结果

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

12.3.3 颜色和风格

context . fillStyle [ = value ]

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

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

context . strokeStyle [ = value ]

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

设置 Java 例子如下：

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);

绘制的图形如下所示：

上面提到的还有 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。

设置 Java 例子如下：

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-64819-3.html