Question

我想绘制圆形画布，并希望下载相同格式的画布。以下是我正在使用的css

canvas {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red;
}

目前我只是将css应用于画布，看起来就像在面料js中不会打印一样。

有没有办法？因为我正在尝试创建圆形画布并添加文本，并希望使用文本和样式打印相同的画布。

修改

是否可以在fabric.js

中绘制具有相同样式的圆圈

Answer 1

你在fabricjs中确实没有圆形画布，但你可以将画布剪裁成一个圆圈。

我做了一个半径为画布半径的圆圈，位于中心。效果与您的示例相同。

看小提琴：

＆＃13;

var canvas = new fabric.Canvas('c');
canvas.clipTo = function(ctx) {
  ctx.beginPath();
  ctx.arc(200,200,200,0,2*Math.PI);
}
canvas.backgroundColor = 'blue';
var rect =  new fabric.Rect({width: 100, height:100, fill:'red', top:30, left:30});
canvas.add(rect);
canvas.renderAll();

＆＃13;

<script src="http://www.fabricjs.com/lib/fabric.js"></script>
<canvas id="c" width="400" height="400" ></canvas>

＆＃13;

绘制圆形画布和打印画布

1 个答案: