绘制图像有两个主要方法, 一个是描边, 一个是填充. 前面介绍过要设置其样式, 可以使用 strokeStyle 和 fillStyle 属性, 只需要给它们提供颜色就可以了. 但是不仅仅是颜色, 它还支持渐变和重复.
相关方法
- CanvasRenderingContext2D.createLinearGradient()
- CanvasRenderingContext2D.createRadialGradient()
- CanvasRenderingContext2D.createPattern()
语法: CanvasRenderingContext2D.createLinearGradient( x0, y0, x1, y1 )
描述:
- 该方法返回一个 CanvasGradient 对象. 用于描述渐变的方式.
- 该方法有两个参数, 用于表示线型渐变的方向与位置.
- 使用的时候, 首先创建一个 CanvasGradient 对象, 然后利用 addColorStop 方法添加颜色区间.
- 方法语法: CanvasGradient.addColorStop( rate, color ).
- 该方法用于设置在某个比例位置的颜色是什么. rate 的取值是 0 到 1 之间.
- 可以添加多个渐变点.
- 然后将该对象赋值给 *Style 属性即可.
案例
[JavaScript] 纯文本查看 复制代码
...
var canvasGradient = ctx.createLinearGradient( 0, 25, 200, 25 );
canvasGradient.addColorStop( 0, 'blue' );
canvasGradient.addColorStop( 1, 'red' );
ctx.fillStyle = canvasGradient;
ctx.fillRect( 0, 100, 200, 50 );
效果
注意: 渐变点的坐标是基于坐标轴来计算的.
放射渐变语法: CanvasRenderingContext2D.createRadialGradient( x0, y0, r0, x1, y1, r1 )
描述:
- 该方法实现放射渐变, 渐变的是在两个圆之间. 一般会使用两个内含关系的圆.
- 前三个参数分别表示其中一个圆的圆心的坐标, 以及半径.
- 后三个参数分别表示另一个圆的圆心的坐标, 以及半径.
- 绘制渐变效果用法与线性渐变一样.
案例
[JavaScript] 纯文本查看 复制代码
var x = cas.width / 2, y = cas.height / 2, r = 100;
var g = ctx.createRadialGradient( x + r * 2 / 3, y - r * 2 / 3, 0, x + r / 3, y - r / 3, r * 4 / 3 );
g.addColorStop( 0, '#fff' );
g.addColorStop( 1, '#f00' );
ctx.fillStyle = g;
ctx.arc( x, y, r, 0, 2 * Math.PI );
ctx.fill();
效果
语法: CanvasRenderingContext2D.createPattern( img, repetition )
描述:
- 该方法表示使用图片来填充的设置方法. 需要两个参数, 一个是图片, 一个是重复的方式.
- 图片允许是 img 标签, 图片, canvas 等对象
- 可选择的重复方式与 CSS 一致. 有: repeat, repeat-x, repeat-y, no-repeat.
- 如果是 空或"", 但不是 undefined, 默认就是 repeat.
准备一张图片
案例
[JavaScript] 纯文本查看 复制代码
var img = new Image();
img.src = 'imgs/04d91106ecb1ec84b6708cd9796fc772.jpg';
img.onload = function () {
var p = ctx.createPattern( img, 'repeat' );
ctx.fillStyle = p;
ctx.fillRect( 50, 50, 550, 350 );
};
效果
在 Canvas 中还可以给绘制的内容设置阴影. 但是一般不这么用, 因为性能不高.
相关属性:
- CanvasRenderingContext2D.shadowBlur 属性表示模糊程度.
- CanvasRenderingContext2D.shadowColor 属性表示模糊颜色.
- CanvasRenderingContext2D.shadowOffsetX 属性表示模糊位置 x 坐标偏移.
- CanvasRenderingContext2D.shadowOffsetY 属性表示模糊位置 y 坐标偏移.
