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);

  • 相关阅读:
    拥塞避免
    计算机网络常考
    [CODEVS1014]装箱问题
    [CODEVS2055]集合划分
    [CODEVS3641]上帝选人
    [GRYZ2014]递增子序列最大和
    [GRYZ2014]最大连续子序列的和
    金矿模型看动归
    [CODEVS1220]数字三角形
    [CODEVS1294]全排列
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4352620.html
Copyright © 2011-2022 走看看