Question

我的页面上有几幅画布。所有这些都应该有一个薄边框，除了一个应该有一个厚边框。我想将所有边框信息放在HTML头部的元素中。这是我的尝试：

<style>
/* The canvas with thick border has the id 'c' */
#c { border: 8px solid #8525AA; }
canvas { border: 2px solid #5408FA; }
</style>

这是我的HTML正文的摘录：

<canvas id="filler" width="10" height="70"></canvas>
<canvas id="c" width="400" height="200">
</canvas>
<!-- more canvases follow here -->

现在的问题是：使用这段代码，id为“c”的画布会有两个边框，一个很粗的边框和一个很薄的边框！这是预期的行为吗？如果是，我怎样才能实现目标？

Answer 1

尝试像这样切换你的CSS：

<style>
/* The canvas with thick border has the id 'c' */
canvas { border: 2px solid #5408FA; }
#c { border: 8px solid #8525AA; }
</style>

Answer 2

如果您要使用多个画布并且只使用它们一次，那么只需在使用画布时添加属性，

<canvas id="1" 
            style="border:2px solid #5408FA"
            width="10px" 
            height="70px">

</canvas>  

<canvas id="2" 
            style="border:8px solid #8525AA"
            width="400px" 
            height="200px">

</canvas>

如果要多次使用相同的属性，则可以将属性设置为#canvas

BUT！

画布有两种尺寸 - 实际像素网格尺寸（宽度和高度属性）和CSS尺寸。

如果未指定像素大小，则通常默认为300x300。

CSS大小仅指定页面中占用的空间量，默认为像素大小。如果它们不相等，则图像将被缩放。

您必须在元素中指定像素大小，或使用Javascript设置它：

Answer 3

首先：对我感到羞耻！

我会记录发生了什么，以及我做了什么错误。

我违反了旧的规则，即在缩小问题范围时，我应该删除每一段不必描述我的问题的代码。在我的情况下，我的HTML文件中还剩下两行，我认为它们不可能影响我的问题（因此我没有在这里发布这些行）。嗯，这次我被咬了：

我的HTML文件在标题中也有以下行：

<script src="fabric_custom1.js"></script>

这会加载fabrik.js的子集，这是一个JavaScript库，可以更轻松地处理画布。这本身并没有做任何坏事。然而，在我的身体里我也有了这条线

<script>var canvas = new fabric.Canvas('c');</script>

这将创建一个fabric.Canvas类型的对象，它提供了一个用于操作前面由id“c”定义的画布的接口。由于我还没有对这个对象做任何事情，我认为这个说法不应该受到伤害，而且我也没有去除它。

然而事实证明，此语句绘制了Canvas的第二个边框。我想这是Fabric.js中的一个错误。

很抱歉打扰了所有人...

<强>更新

我刚刚了解到双边框不是fabric.js中的错误，而是一个功能 - 它的设计就是这样。为了避免这种情况，我们必须创建一个fabric.StaticCanvas而不是fabric.Canvas。

我的画布有2个边框而不是1个

3 个答案: