向 WebGL 画布动态添加和删除边框

Question

我有以下用于生成 html canvas 的代码：

<canvas id="glCanvas" class="canvases" width="20" height="20"></canvas>

并设置颜色我有以下内容：

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

有没有一种简单的方法可以在运行时动态添加和删除边框？也就是说，当满足特定的 if 语句条件时，在 canvas 周围绘制红色边框，当不再满足时，边框将被移除。可以使用 CSS/Javascript/WebGL?

来完成吗

谢谢

Answer 1

您的问题与 WebGL 或 canvases 无关。您可以在任何元素上设置边框，例如

 someElement.style.border = "10px solid red";

并删除边框

 someElement.style.border = "none";

对于 canvas，我建议您将 canvas 包裹在 div 中，像这样

 <div id="border"><canvas id="glCanvas"></canvas></div>

然后查找 div

 borderDiv = document.querySelector("#border");

并根据任何条件使用顶部的代码；

const borderDiv = document.querySelector("#border");
const showButton = document.querySelector("#show");
const hideButton = document.querySelector("#hide");

showButton.addEventListener('click', function() {
  borderDiv.style.border = "10px solid red";
});

hideButton.addEventListener('click', function() {
  borderDiv.style.border = "none";
});

// draw something in canvas. 
const gl = document.querySelector("#glCanvas").getContext("webgl");
gl.clearColor(0,0,1,1);
gl.clear(gl.COLOR_BUFFER_BIT);

#border { display: inline-block; }
#glCanvas { width: 100%; height: 100%; display: block; }

<div id="border"><canvas id="glCanvas"></canvas></div>
<div>
  <button id="show">show border</button>
  <button id="hide">hide border</button>
</div>

您也可以添加和删除样式

someElement.className = "styleWithBorder";
someElement.className = "styleWithoutBorder";

您可以应用多个类，用空格分隔它们

someElement.className = "style1 style2";

const borderDiv = document.querySelector("#border");
const showButton = document.querySelector("#show");
const hideButton = document.querySelector("#hide");

showButton.addEventListener('click', function() {
  borderDiv.className = "styleWithBorder";
});

hideButton.addEventListener('click', function() {
  borderDiv.className = "";
});

// draw something in canvas. 
const gl = document.querySelector("#glCanvas").getContext("webgl");
gl.clearColor(0,0,1,1);
gl.clear(gl.COLOR_BUFFER_BIT);

/* these 2 lines make the border go inside the element
   instead of outside IF the element has a defined width and height */
html { box-sizing: border-box; height: 100%; }
*, *:before, *:after { box-sizing: inherit; }

/* this setting removes the default 5px margin on the body
   and makes the body fill the window so our div will match */
body { margin: 0; height: 100%; }

/* this line makes our border fill the body. We need to set
   the size so the border will go inside */
#border { width: 100%; height: 100%; }

/* this line makes the canvas fill the div it's inside
   and display:block makes it not add whitespace at the end */
#glCanvas { width: 100%; height: 100%; display: block; }

/* here's our border */
.styleWithBorder { border: 10px solid yellow; }

/* make the ui show up over the rest */
#ui { position: absolute; left: 1em; top: 1em; }

<div id="border"><canvas id="glCanvas"></canvas></div>
<div id="ui">
  <button id="show">show border</button>
  <button id="hide">hide border</button>
</div>

向 WebGL 画布动态添加和删除边框

Adding and removing borders dynamically to WebGL canvases

html

javascript

css

border