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);
  • 相关阅读:
    CodeForces 660D Number of Parallelograms
    【POJ 1082】 Calendar Game
    【POJ 2352】 Stars
    【POJ 2481】 Cows
    【POJ 1733】 Parity Game
    【NOI 2002】 银河英雄传说
    【NOI 2015】 程序自动分析
    【POJ 1704】 Georgia and Bob
    【HDU 2176】 取(m堆)石子游戏
    【SDOI 2016】 排列计数
  • 原文地址:https://www.cnblogs.com/lhyxq/p/10562649.html
Copyright © 2011-2022 走看看