Question

我尝试将SVG元素插入画布。我想在画布中添加数学方程的填充。

上看到第一个没有填充的结果

现在，如果我为填充取正值，则尺寸（宽度和长度）会增加。例如，填充等于20px，我得到以下结果：link for padding: 20px。

最后，如果我取一个更大的值（padding: 60px），我会得到这个结果：

link for padding: 60px

您可以注意到这3个案例中的每个案例都将“box-sizing: border-box;”用于“<canvas width="400px" height="400px" id="textbox"></canvas>”

#textbox {
position: absolute;
padding: 60px;
box-sizing: border-box;
background-color: #333333;
border: 2px solid #428bca;
z-index: 100;
}

我想在不改变画布大小的情况下为数学方程式设置填充：我认为box-sizing: border-box;可以让我得到这个结果。

任何人都可以看到问题的来源？

由于

更新1：

AlexK给出的解决方案并没有完全解决我的问题。你可以看到this link我添加了数学方程，你会注意到方程在绿色方块内垂直和水平居中，但我想得到的是方程块（我的意思是从第一行开始）块方程式）在绿色方块的左上角。

Answer 1

设置width和height CSS 属性及其HTML属性对应项。请注意，您希望保持相同的宽高比，否则图像会显得扭曲。

更新：也会以原始宽高比绘制图片，否则会被拉伸！

＆＃13;

var textCanvas = document.getElementById('textbox');
var contextTextBox = textCanvas.getContext('2d');

contextTextBox.fillStyle = "green";
contextTextBox.fillRect(0, 0, 400, 400);

var img = new Image;
img.onload = function() {
  contextTextBox.drawImage(img, 0, 0, 378, 150);
};
img.src = "http://example.com/test_last/formulaWhite.svg";

＆＃13;

#textbox {
  position: absolute;
  padding: 60px;
  box-sizing: border-box;
  background-color: #333333;
  border: 2px solid #428bca;
  z-index: 100;
  height: 400px;
  width: 400px;
}
#containerCanvas {
  position: relative;
  top: 0;
  left: 0;
  margin: 20px;
}

＆＃13;

<div id="containerCanvas">
  <canvas width="400" height="400" id="textbox"></canvas>
</div>

＆＃13;

HTML height和width属性控制绘图空间的分辨率 - 它们允许您在绘图区域中容纳更多或更少的内容。 CSS 尺寸将缩放画布以占据屏幕上的一定空间。

这是一个更多＆＃34;绘图区域＆＃34;的示例，但在屏幕上占用相同的400x400像素。

＆＃13;

var textCanvas = document.getElementById('textbox');
var contextTextBox = textCanvas.getContext('2d');

contextTextBox.fillStyle = "green";
contextTextBox.fillRect(0, 0, 756, 756);

var img = new Image;
img.onload = function() {
  contextTextBox.drawImage(img, 0, 0, 378, 150);
  contextTextBox.drawImage(img, 378, 0, 378, 150);
  contextTextBox.drawImage(img, 0, 150, 378, 150);
  contextTextBox.drawImage(img, 378, 150, 378, 150);
};
img.src = "http://example.com/test_last/formulaWhite.svg";

＆＃13;

#textbox {
  position: absolute;
  padding: 0;
  box-sizing: border-box;
  background-color: #333333;
  border: 2px solid #428bca;
  z-index: 100;
  width: 400px;
  height: 400px;
  padding: 60px;
}

#containerCanvas {
  position: relative;
  top: 0;
  left: 0;
  margin: 20px;
}

＆＃13;

<div id="containerCanvas">
  <canvas width="756" height="756" id="textbox"></canvas>
</div>

＆＃13;

使用box-sizing将填充设置为canvas容器：border-box

1 个答案: