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

  • 相关阅读:
    requestWindowFeature()的应用(转载)
    Android美工坊selector选择器的使用(转载)
    Activity强制横屏竖屏
    ActivityGroup的简单用法(2)Demo展示讲解
    AndroidGUI25:定制Activity的标题栏(Titlebar)(转载)
    android背景选择器selector用法汇总
    eclipse的注释字体大小如何修改?不改变代码的字体
    QML基础——QML国际化(中文示例)
    QML基础——在C++程序中使用QML
    App for Android (4) —— Eclipse篇
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4352620.html
Copyright © 2011-2022 走看看