화면을 맞춤설정하려고 합니다.

• 생성 중인 페이지를 개체(버튼/슬라이더/기타)뿐만 아니라 설명이 포함된 제목으로 채우는 것을 잊지 마세요. 때로는 텍스트를 정렬하기 위해 표를 사용하기도 합니다
• 제목과 개체 그룹 수는 귀하에게 달려 있습니다. 나는 주로 사물의 유사성보다는 목적에 따라 그룹화한다.

<h1>Green Screen Web Page</h1>

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

<canvas>



<ul>
<li>If there is a standard object whose size and color suit you, I advise you not to explicitly set parameters for it. Save time</li>
<li>Also, if you are not making a new project, but a continuation, you can save the selected settings and simply copy from .CSS to .CSS file
</li>
</ul>

<pre class="brush:php;toolbar:false">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);
}

위 내용은 화면을 맞춤설정하려고 합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!