Question

在更改事件中，我试图将画布画成椭圆形，我没有获得适当的属性画布以椭圆形格式绘制这个画布。我在我的代码中设置了以下属性，请看下面的代码。我用css尝试了这个，我正在完成输出但是当我尝试转换画布作为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

使用fabric.js将画布形状绘制为椭圆形布局

1 个答案: