Fabric.js demos · Clipping

var canvas = new fabric.Canvas('c');
var radius = 300;

fabric.Image.fromURL('images/pug_small.jpg', function(img) {
img.scale(0.5).set({
left: 250,
top: 250,
angle: -15,
clipTo: function (ctx) {
ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
}
});
canvas.add(img).setActiveObject(img);
});

(function animate() {
fabric.util.animate({
startValue: Math.round(radius) === 50 ? 50 : 300,
endValue: Math.round(radius) === 50 ? 300 : 50,
duration: 1000,
onChange: function(value) {
radius = value;
canvas.renderAll();
},
onComplete: animate
});
})();

适用浏览器：FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。

代码整理：站长图库