绘制圆形画布和打印画布答案

【问题标题】：Draw circle canvas and print canvas绘制圆形画布和打印画布
【发布时间】：2016-02-12 07:09:04
【问题描述】：

我想绘制圆形画布并想下载相同格式的画布。以下是我正在使用的 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中以相同的样式绘制圆圈

【问题讨论】：

我不明白，你的预期输出是什么？
我想下载圆形画布。您可以查看以下网址jsfiddle.net/davidThomas/7F7Vn
border-radius: 50% 在画布元素上

标签： javascript css html canvas fabricjs

【解决方案1】：

你不能在fabricjs中真正拥有一个圆形画布，但你可以剪裁一个画布看起来像一个圆圈。

我做了一个半径为画布一半的圆，并位于中心。效果和你的例子一样。

看小提琴：

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>

【讨论】：