HTML5如何画有颜色的矩阵,html5 – CreateJS带矩阵的径向渐变

我不知道createJS足够,也不知道Flash Matrix对象,但是要使用原生Canvas2d API制作这种ovalGradient,您需要转换上下文的矩阵.

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var horizontalScale = .3;

var verticalScale = 1;

var gradient = ctx.createRadialGradient(100/horizontalScale, 100/verticalScale, 100, 100/horizontalScale,100/verticalScale,0);

gradient.addColorStop(0,"green");

gradient.addColorStop(1,"red");

// shrink the context's matrix

ctx.scale(horizontalScale, verticalScale)

// draw your gradient

ctx.fillStyle = gradient;

// stretch the rectangle which contains the gradient accordingly

ctx.fillRect(0,0, 200/horizontalScale, 200/verticalScale);

// reset the context's matrix

ctx.setTransform(1,0,0,1,0,0);

canvas{ background-color: ivory;}

编辑

正如你所注意到的,这也会缩小你绘制的形状,你也必须计算你应该在绘图中“解开”多少,就像我对fillRect一样. (同意,这个很容易)

这是一个可以帮助您处理更复杂形状的函数.我没有真正测试它(只有给定的例子),所以它可能以某种方式失败,但它也可以让你知道如何处理它：

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

function shrinkedRadial(ctx, shapeArray, xScale, yScale, gradientOpts) {

// scaling by 0 is like not drawing

if (!xScale || !yScale) return;

var gO = gradientOpts;

// apply our scale on the gradient options we passed

var gradient = ctx.createRadialGradient(gO.x0 / xScale, gO.y0 / yScale, gO.r0, gO.x1 / xScale, gO.y1 / yScale, gO.r1);

gradient.addColorStop(gO.c1_pos, gO.c1_fill);

gradient.addColorStop(gO.c2_pos, gO.c2_fill);

// shrink the context's matrix

ctx.scale(xScale, yScale);

ctx.fillStyle = gradient;

// execute the drawing operations' string

shapeArray.forEach(function(str) {

var val = str.split(' ');

var op = shapesRef[val[0]];

if (val[1]) {

var pos = val[1].split(',').map(function(v, i) {

// if even, it should be an y axis, otherwise an x one

return i % 2 ? v / yScale : v / xScale;

});

ctx[op].apply(ctx, pos);

} else {

// no parameters

ctx[op]();

}

});

// apply our gradient

ctx.fill();

// reset the transform matrix

ctx.setTransform(1, 0, 0, 1, 0, 0);

}

// just for shortening our shape drawing operations

// notice how arc operations are omitted, it could be implemented but...

var shapesRef = {

b: 'beginPath',

fR: 'fillRect',

m: 'moveTo',

l: 'lineTo',

bC: 'bezierCurveTo',

qC: 'quadraticCurveTo',

r: 'rect',

c: 'closePath'

};

var gradientOpts = {

x0: 232,

y0: 55,

r0: 70,

x1: 232,

y1: 55,

r1: 0,

c1_fill: 'red',

c1_pos: 0,

c2_fill: 'green',

c2_pos: 1

}

var shapes = ['b', 'm 228,133', 'bC 209,121,154,76,183,43', 'bC 199,28,225,34,233,59', 'bC 239,34,270,29,280,39', 'bC 317,76,248,124,230,133']

// our shape is drawn at 150px from the right so we do move the context accordingly, but you won't have to.

ctx.translate(-150, 0);

shrinkedRadial(ctx, shapes, .3, 1, gradientOpts);

ctx.font = '15px sans-serif';

ctx.fillStyle = 'black';

ctx.fillText('shrinked radialGradient', 3, 20);

// how it looks like without scaling :

ctx.translate(50, 0)

var gO = gradientOpts;

var gradient = ctx.createRadialGradient(gO.x0, gO.y0, gO.r0, gO.x1, gO.y1, gO.r1);

gradient.addColorStop(gO.c1_pos, gO.c1_fill);

gradient.addColorStop(gO.c2_pos, gO.c2_fill);

ctx.fillStyle = gradient;

shapes.forEach(function(str) {

var val = str.split(' ');

var op = shapesRef[val[0]];

if (val[1]) {

var pos = val[1].split(',');

ctx[op].apply(ctx, pos);

} else {

ctx[op]();

}

});

ctx.fill();

ctx.font = '15px sans-serif';

ctx.fillStyle = 'black';

ctx.fillText('normal radialGradient', 160, 20);