fabric.js : 如何制作带有白色边框的圆形图像

Question

我正在使用 Fabric.js 在 HTML canvas 上创建一些动画。我需要做这个：

如果我使用图像元素，我不能把它做成圆形，也不能放白色边框。
如果我使用圆形对象，我无法在其中放置图像。

任何想法将不胜感激。 TIA

Answer 1

用 clipTo 函数尝试这样的事情：

fabric.Image.fromURL(imageURL, function(oImg) {
    oImg.scale(1.0).set({
        left: 10,
        top: 10,
        stroke : 'white',
        strokeWidth : 100,
        clipTo: function (ctx) {
            ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
          }
    });
    canvas.add(oImg).setActiveObject(oImg);
    canvas.renderAll();
});

Fiddle: http://jsfiddle.net/q6Y6k/8/

fabric.js : 如何制作带有白色边框的圆形图像

fabric.js : How to make an image in the shape of a circle with white borders

image

html5-canvas

fabricjs