Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用fabric.js将画布形状绘制为椭圆形_Javascript_Css_Html_Canvas_Fabricjs - Fatal编程技术网

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

Javascript 使用fabric.js将画布形状绘制为椭圆形,javascript,css,html,canvas,fabricjs,Javascript,Css,Html,Canvas,Fabricjs,在更改事件中,我试图将画布绘制为椭圆形,但并没有获得正确的属性 我已经在我的代码中设置了以下属性,请参见下面的代码。我用css尝试了这一点,我的输出非常完美,但是当我尝试将画布转换为png图像时,画布形状不会在图像中转换,所以我希望以这种方式转换 $("#decalshap").change(function() { alert("oval"); var shap = $(this).val(); if(shap=="oval") {

在更改事件中,我试图将画布绘制为椭圆形,但并没有获得正确的属性 我已经在我的代码中设置了以下属性,请参见下面的代码。我用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,
    });  
 }

答案将不胜感激

为此,您必须使用clipTo属性,使用此代码在画布中绘制椭圆形 //剧本


这是小提琴

对于这个你必须剪切的属性,使用这个代码在画布上画一个椭圆形 //剧本


这是小提琴

有些小提琴也会很受欢迎的;)一些小提琴也会被欣赏;)@utdev@utdev
 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();
}