[Javascript] Gradient Fills on the HTML5 Canvas-优快云博客

本文通过几个具体的示例展示了如何使用HTML5 Canvas API创建线性和径向渐变，并将其应用于矩形和圆形的填充效果中。通过对不同颜色停止点的设置，实现了从一种颜色平滑过渡到另一种颜色的效果。

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

转载于:https://www.cnblogs.com/Answer1215/p/4352620.html