尝试自定义屏幕

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《尝试自定义屏幕》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

• 不要忘记不仅用对象（按钮/滑块/其他）填充正在创建的页面，还用带有说明的标题填充。有时还用表格来对齐文本
• 要制作多少个标题和对象组取决于您。我通常按​​目的而不是按对象的相似性进行分组

<h1>green screen web page</h1>

<script src="https://www.dukelearntoprogram.com/course1/common/js/image/simpleimage.js"> </script>

<canvas id="can1"></canvas>
<canvas id="can2"></canvas>

<p>
foreground: &lt;input type=&quot;file&quot; multiple=&quot;false&quot; accept=&quot;image/*&quot; id=&quot;fgfile&quot; onchange=&quot;loadforegroundimage()&quot;&gt;
</p>

<p>
background: &lt;input type=&quot;file&quot; multiple=&quot;false&quot; accept=&quot;image/*&quot; id=&quot;bgfile&quot; onchange=&quot;loadbackgroundimage()&quot;&gt;
</p>

&lt;input type=&quot;button&quot; id=&quot;button&quot; value=&quot;create composite&quot; onclick=&quot;dogreenscreen()&quot;&gt;

&lt;input type=&quot;button&quot; id=&quot;button&quot; value=&quot;clear canvas&quot; onclick=&quot;clearcanvas()&quot;&gt;

• 如果有一个标准对象的大小和颜色适合你，我建议你不要显式地为其设置参数。节省时间
• 此外，如果您不是要创建新项目，而是要继续项目，则可以保存所选设置并只需从 .css 复制到 .css 文件

h1 {
  font-size: 20pt;
  font-family: arial;
  color: #4b0082;
}

body {
  background-color: #faebd7;
}

p {
  font-size: 13pt;
}

canvas {
  width: 380px;
  background-color: #7b68ee;
  border: 2px solid #a9a9a9;
}

input {
  font-size: 12pt;
}

这是一个相当简单但说明性的页面设计：

• 最好将所有与对象相关的工作封装在函数中，以分隔全局变量和局部变量的区域
• 用默认值（null）来识别值——这是我听过的最好的编程规则。错误-100

var fgimage = null;
var bgimage = null;
var can1 = null;
var can2 = null;

function loadForegroundImage(){
  can1 = document.getElementById("can1");
  var imgFile = document.getElementById("fgfile");
  fgimage = new SimpleImage(imgFile);
  fgimage.drawTo(can1);
}

function loadBackgroundImage(){
  can2 = document.getElementById("can2");
  var imgFile = document.getElementById("bgfile");
  bgimage = new SimpleImage(imgFile);
  bgimage.drawTo(can2);
}

function doGreenScreen(){
  if (fgimage==null || !fgimage.complete()) {
    alert("Foreground not loaded");
    return;
  }
  if (bgimage==null || !bgimage.complete()) {
    alert("Background not loaded");
    return;
  }
  clearCanvas();

  var output = new SimpleImage(fgimage.getWidth(), fgimage.getHeight());

  for (var pixel of fgimage.values()) {
    if (pixel.getGreen()> pixel.getRed() + pixel.getBlue()) {
      var x = pixel.getX();
      var y = pixel.getY();
      var bgpixel = bgimage.getPixel(x, y);
      output.setPixel(x, y, bgpixel);
    }
    else {
      output.setPixel(pixel.getX(), pixel.getY(), pixel);
    }
  }
  output.drawTo(can1);
}

function clearCanvas(){
  can1 = document.getElementById("can1");
  can2 = document.getElementById("can2");

  var context1 = can1.getContext("2d");
  var context2 = can2.getContext("2d");
  context1.clearRect(0,0,can1.width,can1.height);
  context2.clearRect(0,0,can2.width,can2.height);
}

以上就是《尝试自定义屏幕》的详细内容，更多关于的资料请关注golang学习网公众号！