zoukankan      html  css  js  c++  java
  • Javascript高级编程学习笔记(92)—— Canvas(9) 渐变

    渐变

    渐变由 canvasGradient 实例表示

    要创建一个渐变对象需要调用 createLinearGradient() 方法

    该方法接收四个参数:

    1. 起点的x坐标
    2. 起点的y坐标
    3. 终点的x坐标
    4. 终点的y坐标

    调用该方法后会创建一个指定大小的实例,并返回一个 CanvasGradient 实例

    创建渐变对象后需要指定色标,通过 addColorStop()

    该方法接收两个参数:

    • 色标位置 
    • CSS颜色值

    如:

    var gradient = context.createLinearGradient(30,30,70,70);
    
    gradient.addColorStop(0,"white");
    gradient.addColorStop(1,"black");

    渐变对象创建完成后就可以将渐变对象赋值给 fillStyle strokeStyle 来通过渐变绘制图像

    // 绘制渐变矩形
    context.fillStyle = gradient;
    context.fillRect(30,30,50,50);

    而如果需要使用径向渐变,则需要使用 createRadialGradient() 方法

    该方法接收6个参数:

    1. 起点圆的圆心x坐标
    2. 起点圆的圆心y坐标
    3. 起点圆的圆半径
    4. 终点圆的圆心x坐标
    5. 终点圆的圆心y坐标
    6. 终点圆的圆半径
    var gradient = context.createRadialGradient(30,30.10,30,30,20);
    
    gradient.addColorStop(0,"white");
    gradient.addColorStop(1,"black");
    
    context.fillStyle = gradient;
    context.fillRect(30,30,50,50);
  • 相关阅读:
    Yarn Client 模式
    K8S & Mesos 模式
    python_切片
    RDD执行原理
    基础编程
    python_html模板
    python_返回值
    python_机器学习_平均中位数模式
    VISIO下载+安装+第一个数据流图
    session对象
  • 原文地址:https://www.cnblogs.com/lhyxq/p/10562649.html
Copyright © 2011-2022 走看看