zoukankan      html  css  js  c++  java
  • [Javascript] Gradient Fills on the HTML5 Canvas

    window.onload = function() {
    
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");
    
        var gradient =context.createLinearGradient(100,100,100,200);
        gradient.addColorStop(1,"blue");   // show blue at the bottom
        gradient.addColorStop(0,"yellow"); // show yellow on the top
        
        context.fillStyle=gradient;
        context.fillRect(100,100,100,100);
    };

    window.onload = function() {
    
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");
    
        var gradient =context.createLinearGradient(100,100,100,200);
        gradient.addColorStop(1,"blue");   // show blue at the bottom
        gradient.addColorStop(0.75, "pink"); //close to the bottom
        gradient.addColorStop(0,"yellow"); // show yellow on the top
    
        context.fillStyle=gradient;
        context.fillRect(100,100,100,100);
    };

    window.onload = function() {
    
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");
    
        var gradient =context.createLinearGradient(100,100,200,100);
        gradient.addColorStop(1,"blue");   // show blue at the bottom
        gradient.addColorStop(0.75, "pink"); //close to the bottom
        gradient.addColorStop(0,"yellow"); // show yellow on the top
    
        context.fillStyle=gradient;
        context.fillRect(100,100,100,100);
    };

    ----------------------------

    window.onload = function() {
    
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");
    
        var gradient = context.createRadialGradient(100,100,0,100,100,50);
        gradient.addColorStop(0, "white");
        gradient.addColorStop(1, "black");
    
        context.fillStyle = gradient;
        context.beginPath();
        context.arc(100,100,50,0,Math.PI * 2);
        context.closePath();
        context.fill();
    
    };

    var gradient = context.createRadialGradient(100,100,20,100,100,50);

    var gradient = context.createRadialGradient(100,100,20,100,100,80);

    var gradient = context.createRadialGradient(100,100,20,100,100,30);

    var gradient = context.createRadialGradient(120,80,0,110,90,60);

  • 相关阅读:
    Prim算法的3个版本
    [转]"undefined reference to" 问题解决方法
    C/C++ 读写 Excel
    Poj 3468
    关于PS中矩形工具的学习
    PS初学习
    java第二天学习。
    Java学习第一天
    二叉树的线索化
    struct files_struct
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4352620.html
Copyright © 2011-2022 走看看