如何在画布周围添加红色边框

Question

我希望红色边界线能像现在这样围绕画布。目前，所有的空白都阻止了这种情况的发生。

代码的哪一部分对此负责？

这就是我所要做的，去除画布周围的空白。

代码https://jsfiddle.net/c1bqhde2/

我不知道怎么做这个

你如何摆脱红色边框框内的空白？

我正在尝试这样做：图像

let s = document.createElement("canvas");
s.width = s.height = 512;
let sun = s.getContext("2d");
let canvas = document.getElementById("c");
canvas.width = canvas.height = 512;
let ctx = canvas.getContext("2d");
let gradient = sun.createLinearGradient(0, 50, 0, canvas.height - 50);
gradient.addColorStop(0, '#fbf120ff');
gradient.addColorStop(0.355, "#fd8227ff");
gradient.addColorStop(0.356, "#fd822700");
gradient.addColorStop(0.364, "#fd822700");
gradient.addColorStop(0.365, "#fd8227ff");
gradient.addColorStop(0.42, "#fe6828ff");
gradient.addColorStop(0.421, "#fe682800");
gradient.addColorStop(0.434, "#fe682800");
gradient.addColorStop(0.435, "#fe6828ff");
gradient.addColorStop(0.49, "#fe5430ff");
gradient.addColorStop(0.491, "#fe543000");
gradient.addColorStop(0.509, "#fe543000");
gradient.addColorStop(0.51, "#fe5430ff");
gradient.addColorStop(0.562, "#fe4b38ff");
gradient.addColorStop(0.563, "#fe4b3800");
gradient.addColorStop(0.582, "#fe4b3800");
gradient.addColorStop(0.584, "#fe4b38ff");
//64 -- fe3446
gradient.addColorStop(0.63, "#fe3446ff");
gradient.addColorStop(0.631, "#fe344600");
gradient.addColorStop(0.657, "#fe344600");
gradient.addColorStop(0.658, "#fe3446ff");
//73 -- fe2558
gradient.addColorStop(0.710, "#fe2558ff");
gradient.addColorStop(0.711, "#fe255800");
gradient.addColorStop(0.739, "#fe255800");
gradient.addColorStop(0.74, "#fe2558ff");
//80 -- fe1f5f
gradient.addColorStop(0.785, "#fe1f5fff");
gradient.addColorStop(0.786, "#fe1f5f00");
gradient.addColorStop(0.825, "#fe1f5f00");
gradient.addColorStop(0.826, "#fe1f5fff");
//87 -- fe1967
gradient.addColorStop(0.860, "#fe1967ff");
gradient.addColorStop(0.861, "#fe196700");
gradient.addColorStop(0.905, "#fe196700");
gradient.addColorStop(0.906, "#fe1967ff");
//94 -- ff1270
gradient.addColorStop(.940, '#ff1270ff');
gradient.addColorStop(.941, '#ff127000');
sun.fillStyle = gradient;
sun.beginPath();
sun.arc(canvas.height / 2, canvas.height / 2, 206, 0, 2 * Math.PI);
sun.fill();
//ctx.shadowColor = '#ff0d77af';
//ctx.shadowBlur = 50;
ctx.drawImage(s, 0, 0);

body {
background-color: white;
}
#c {
border: 1px solid red;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}

<div class="container">
<canvas width="512" height="512" id=c></canvas>
</div>

Answer 1

HTML文档中的body元素自动带有默认边距。将边距更改为0以删除此项：

body {
background-color: white;
margin: 0;
}

值得注意的是，应用于包装画布的.canvas-containerdiv的flex样式将使画布在屏幕上居中，并在左右两侧提供边距。关于如何使用flexbox的更多信息，我推荐这篇文章。

Answer 2

当你说"空白"；，这是你的图像(太阳(和边界框之间的空间还是颜色本身？因为如果你把背景颜色换成另一种颜色，你可以看到它并不是真正的白色，它在你的形状周围都是透明的。

您创建了一个512x512画布，并绘制了一个较小的图像，您要么想使画布变小，要么想使绘图变大。

希望能有所帮助。

Answer 3

我在这里更新了您的jsfiddle：https://jsfiddle.net/uqxdvp9L/

我采用了两种方法。

方法1(在css中(：

#c {
border: 1px solid red;
border-radius: 50% 50%;
}

这会将边界从方形更改为圆形。如果这不是你需要的，那就把它引出来。

方法2(在画布上(：

sun.arc(canvas.height / 2, canvas.height / 2, canvas.height / 2, 0, 2 * Math.PI);

我将圆弧的半径更改为画布的一半，这使其填充画布大小。如果您想保持原始大小，您需要在html和js中查找具有512值的所有位置，并将其替换为412，因为您最初将206作为半径。

第三种方法是，你可以用1像素宽和红色的线条样式绘制另一条没有相同半径填充的圆弧：

context.beginPath();
context.arc(canvas.height / 2, canvas.height / 2, canvas.height / 2, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = '#ff0000';
context.stroke();