Hello! 欢迎来到小浪资源网！

尝试自定义屏幕

小浪博主 2024-12-07 16

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

<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: <input type="file" multiple="false" accept="image/*" id="fgfile" onchange="loadforegroundimage()"> </p>  <p> background: <input type="file" multiple="false" accept="image/*" id="bgfile" onchange="loadbackgroundimage()"> </p>  <input type="button" id="button" value="create composite" onclick="dogreenscreen()">  <input type="button" id="button" value="clear canvas" onclick="clearcanvas()">

如果有一个标准对象的大小和颜色适合你，我建议你不要显式地为其设置参数。节省时间
此外，如果您不是要创建新项目，而是要继续项目，则可以保存所选设置并只需从 .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); }

X