MorphSVGPlugin.defaultRender
MorphSVGPlugin.defaultRender: 函数
设置每当 MorphSVG 补间动画更新时应调用的默认函数。当你渲染到<canvas>.
细节
设置每当 MorphSVG 补间动画更新时应调用的默认函数。当你渲染到<canvas>.
视频讲解
示例：MorphSVG Canvas 渲染
加载中...
这里是一个补间动画和一个渲染函数的示例，该函数会将变形图形绘制到 Canvas 上：
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
vw = (canvas.width = window.innerWidth),
vh = (canvas.height = window.innerHeight);
ctx.fillStyle = "#ccc";
MorphSVGPlugin.defaultRender = draw;
gsap.to("#hippo", { duration: 2, morphSVG: "#circle" });
function draw(rawPath, target) {
var l, segment, j, i;
ctx.clearRect(0, 0, vw, vh);
ctx.beginPath();
for (j = 0; j < rawPath.length; j++) {
segment = rawPath[j];
l = segment.length;
ctx.moveTo(segment[0], segment[1]);
for (i = 2; i < l; i += 6) {
ctx.bezierCurveTo(
segment[i],
segment[i + 1],
segment[i + 2],
segment[i + 3],
segment[i + 4],
segment[i + 5]
);
}
if (segment.closed) {
ctx.closePath();
}
}
ctx.fill("evenodd");
}
