使用fabric.js將畫布形狀繪制為橢圓形的lauout

Question

在更改事件中，我試圖將畫布繪制為橢圓形，我沒有獲得正確的canvas屬性來以橢圓格式繪制此畫布。我在代碼中設置了以下屬性，請參見以下代碼。我使用css和i嘗試了此操作變得完美了，但是當我嘗試將畫布轉換為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屬性，請使用此代碼在畫布上繪制一個橢圓形// script

 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();
}

這是小提琴演示