使用fabric.js绘制画布形状作为椭圆形lauout

Question

关于更改事件我试图将画布绘制为椭圆形状，我没有获取画布的适当属性 以椭圆形格式绘制此画布。我设置了以下属性在我的代码中看到下面的代码。我尝试了这与CSS，我越来越完美了，但是当ia试图将画布转换为PNG图像画布形状不会在图像中转换，所以这就是为什么，我想这样。

$("#decalshap").change(function() { 
     alert("oval"); 
     var shap = $(this).val(); 
    if(shap=="oval") 
     { 
    canvas.set({ 
    height:314, 
    width:500,  
    borderColor: 'red', 
    borderRadius: 314.5/157.25, 
    border:2, 
    }); 
} 

答案将不胜感激。

Answer 1

为此，你必须clipTo属性，使用此代码在画布 //脚本绘制一个椭圆

var w; 
var h; 
var ctx = canvas.getContext('2d'); 
w=canvas.width/4; 
h=canvas.height/2.4; 
canvas.clipTo = function(ctx) { 
ctx.save(); 
ctx.scale(2, 1.2); 
ctx.arc(w, h, 90, 0, 2 * Math.PI, true); 
ctx.stroke(); 
ctx.restore(); 
//canvas.renderAll(); 
} 

这里是小提琴DEMO