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

  • 相关阅读:
    通过asp.net 生成xml文件
    listbox 多选处理
    girdview 找到其焦点的笨办法
    关于.net 中调用script的alert后 css失效的办法
    从数据库中读数据中寻找若隐若现的OOP
    Gitlab的安装部署和介绍
    守住你的网站:防御DDoS攻击指南
    分析SQL语句使用资源情况
    Linux下Sniffer程序的实现
    NDIS resources
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4352620.html
Copyright © 2011-2022 走看看