A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2018-6-15 14:39 编辑

【济南校区】前端就业班笔记Canvas(八):渐变和图案

绘制图像有两个主要方法, 一个是描边, 一个是填充. 前面介绍过要设置其样式, 可以使用 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 );
效果
2016-08-13_013233.png
注意: 渐变点的坐标是基于坐标轴来计算的.
放射渐变
语法: 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();

效果
2016-08-13_014617.png
重复填充
语法: CanvasRenderingContext2D.createPattern( img, repetition )
描述:
  • 该方法表示使用图片来填充的设置方法. 需要两个参数, 一个是图片, 一个是重复的方式.
  • 图片允许是 img 标签, 图片, canvas 等对象
  • 可选择的重复方式与 CSS 一致. 有: repeat, repeat-x, repeat-y, no-repeat.
  • 如果是 空或"", 但不是 undefined, 默认就是 repeat.

准备一张图片
04d91106ecb1ec84b6708cd9796fc772.jpg
案例
[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 );
    };
效果
2016-08-13_015514.png
阴影
在 Canvas 中还可以给绘制的内容设置阴影. 但是一般不这么用, 因为性能不高.
相关属性:

  • CanvasRenderingContext2D.shadowBlur 属性表示模糊程度.
  • CanvasRenderingContext2D.shadowColor 属性表示模糊颜色.
  • CanvasRenderingContext2D.shadowOffsetX 属性表示模糊位置 x 坐标偏移.
  • CanvasRenderingContext2D.shadowOffsetY 属性表示模糊位置 y 坐标偏移.
如果你想了解更多黑马课程请点击这里,如果你想加入黑马这个大家庭学习先进技术,广交天下好友!
黑马程序员济南中心联系电话:0531-55696830

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马