使用fabricjs插件不同形状的画布答案

【问题标题】：Canvas in different shapes with fabricjs plugin使用fabricjs插件不同形状的画布
【发布时间】：2013-10-22 14:14:26
【问题描述】：

我正在尝试将画布形状设置为圆形和单击按钮时的任何其他形状。但普通剪辑不适用于 fabricjs 。你能分享一下简单的画布形状示例供我参考吗？

我正在使用fabricjs，我尝试了下面的代码等等，但没有任何效果。

canvas.clipTo = function(ctx) {
     // clip to a circle circle
     ctx.rect(10,20,300,200);
     ctx.stroke();
     };

【问题讨论】：

标签： javascript jquery html canvas fabricjs

【解决方案1】：

试试这个希望对你有帮助。

<select name="Decal Shape" id="decalshap" class="hasClass" style="height:30px;">
<option > Select Shape </option>
<option value="oval"> OVAL </option>
<option value="circle"> CIRCLE </option>
<option value="rectangle">RECTANGLE</option>
<option value="hrectangle"> HORIZONTAL RECTANGLE </option>
<option value="vrectangle"> VERTICAL RECTANGLE </option>
</select>
<div id="work_area">
</div>

    $("#decalshap").change(function() {
         alert("decal");
         var shap = $(this).val();
     if(shap=="oval")
        {
         var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:1200,
        height:600
    }).appendTo('#work_area');
     var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
   // ctx.fillStyle='rgba(70, 70, 255, 0.7)'
   // ctx.fillRect(20,20,150,100);
    var centerX = 0;
      var centerY = 0;
      var radius = 50;
      ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.scale(2, 1);
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      ctx.restore();
      ctx.fillStyle = '#8ED6FF';
      ctx.fill();
      ctx.lineWidth = 5;
      ctx.strokeStyle = 'black';
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    }  
    if(shap=="circle")
        {
          var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:1200,
        height:600
    }).appendTo('#work_area');
    var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(100,75,50,0,2*Math.PI);
    ctx.stroke();
       }
       if(shap=="hrectangle")
        {
        var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:1200,
        height:300
    }).appendTo('#work_area');
    var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
   ctx.fillStyle='border: 1px dotted';
    ctx.fillRect(0,0,200,400);
       }
       if(shap=="vrectangle")
        {
          var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:300,
        height:600
    }).appendTo('#work_area');
    var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
   ctx.fillStyle='border: 1px dotted';
    ctx.fillRect(0,0,400,200);
       }
       });

【讨论】：

【解决方案2】：

试试这个脚本，用fabricjs将你的画布转换成圆形。你可以使用clipTo函数将你的画布剪裁成任何形状，因为我将我的画布剪成圆形

//html

<canvas id="c" width="400" height="300"></canvas>

//脚本

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'red';
var w=canvas.width / 2;
var h=canvas.height / 2;
canvas.clipTo = function(ctx) {

 //ctx.scale(2, 1);
ctx.arc(w, h, 150, 0, Math.PI * 2,true);

};
 canvas.renderAll();
var text;
text = new fabric.Text('Honey', {
  fontSize: 50,
  left: 100,
  top: 100,
  lineHeight: 1,
  originX: 'left',
  fontFamily: 'Helvetica',
  fontWeight: 'bold'
});
canvas.add(text);

//css

canvas {  border:1px solid #000;     }
.controles {  margin:50px 0;   }

这是我的fiddle demo，希望对你有所帮助。

【讨论】：

您好，您的帖子已被标记为“低质量”，可能是因为它仅包含代码。您可以通过解释这究竟是如何以及为什么回答问题来大大改进您的答案？