Question

我在StackOverflow中的第一个问题。有没有办法在HTML5 Canvas中只创建LinearGradient，但在所有不同的矩形形状和大小上使用它，并获得相同的填充模式。

var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 20, 0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"red");
ctx.fillStyle = grd;

使用此渐变填充两个不同形状的矩形。

Answer 1

如果要使用一个渐变来绘制多个矩形，则必须使用标准化渐变（== [0,1]中的坐标），然后以标准化方式绘制矩形。

Expl：

var grd = ctx.createLinearGradient(0, 0, 1.0, 0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"red");

然后用：

绘制矩形

function drawNormalizedRect(context, x,y,w,h) {
   context.save();
   context.translate(x,y);
   context.scale(w,h);
   context.fillRect(0,0,1,1);
   context.restore();
}

使用说明

ctx.fillStyle = grd; 
drawNormalizedRect(ctx, 200, 320, 40, 50);

＆＃13;

var canvas=document.getElementById('cv');
    var ctx = canvas.getContext('2d');

    var grd = ctx.createLinearGradient(0, 0, 1.0, 0);
    grd.addColorStop(0,"black");
    grd.addColorStop(1,"red");
    ctx.fillStyle = grd; 


    for (var i=0; i<20; i++) {
       drawNormalizedRect(ctx,Math.random()*600, Math.random()*400, 10+Math.random()*60, 10+Math.random()*60);
    }


    function drawNormalizedRect(ctx,x,y,w,h) {
       ctx.save();
       ctx.translate(x,y);
       ctx.scale(w,h);
       ctx.fillRect(0,0,1,1);
       ctx.restore();
    }

＆＃13;

<canvas width=600 height=400 id='cv' ></canvas>

＆＃13;

HTML Canvas中的渐变

1 个答案: