使用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