画圆 canvas 并打印 canvas

Question

我想画通告canvas，想下载同样格式的canvas。以下是我正在使用的 css

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

目前我刚刚将 css 应用到 canvas 看起来它不会在 fabric js 中打印相同的内容。

有什么办法吗？因为我正在尝试创建循环 canvas 并添加文本，并希望使用文本和样式打印相同的 canvas。

编辑：

是否可以在 fabric.js

中绘制具有相同样式的圆

Answer 1

在 fabricjs 中你不可能真的有一个圆形 canvas，但是你可以剪辑一个 canvas 看起来像一个圆形。

我做了一个圆，半径是 canvas 的一半，并且位于中心。效果和你的例子一样。

看fiddle:

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

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

画圆 canvas 并打印 canvas

Draw circle canvas and print canvas

html

javascript

css

canvas

fabricjs