javascript - 绘制圆形 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>