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

  • 相关阅读:
    (个人题目)作业 题解
    P2618 数字工程
    P6394 樱花,还有你
    USACO08FEB Making the Grade G
    USACO13NOV Pogo-Cow S
    CSP2019 树上的数
    JSOI2018 潜入行动
    NOIP2017 宝藏
    SNOI2017 炸弹
    【洛谷】【最小生成树】P1195 口袋的天空
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4352620.html
Copyright © 2011-2022 走看看