已知2个点p1,p1
如何在zrender
里添加createLinearGradient
?
问题是如何用 zrender
画一条渐变的线对么?
require(
['zrender', 'zrender/shape/Line', 'zrender/tool/color'],
function(zrender, LineShape, color) {
var stage = document.getElementById('stage');
var zr = zrender.init(stage);
var p0 = {x: 0, y: 0};
var p1 = {x: Math.ceil(zr.getWidth()), y: Math.ceil(zr.getHeight())};
var colorList = [[0, '#333'], [1, '#fff']];
var linearGradient = color.getLinearGradient(0, 0, 0, p1.y, colorList);
zr.addShape(new LineShape({
style: {
xStart: p0.x,
yStart: p0.y,
xEnd: p1.x,
yEnd: p1.y,
strokeColor: linearGradient,
lineWidth: 10
},
draggable: true
}));
zr.render();
}
);
DEMO
看 codepen