![how-to-write-a-content-brief-[template-+-examples]](https://prodsens.live/wp-content/uploads/2025/01/30978-how-to-write-a-content-brief-template-examples-80x80.webp)
- Don’t forget to fill your page being created not only with objects (
buttons/sliders/other), but also with headings with explanations. And sometimes with tables to align the text - How many headings and object groups to make is up to you. I usually group by purpose rather than by similarity of objects
Green Screen Web Page
Foreground:
Background:
- If there is a standard object whose size and color suit you, I advise you not to explicitly set parameters for it. Save time
- Also, if you are not making a new project, but a continuation, you can save the selected settings and simply copy from
.CSSto.CSSfile
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;
}
Here’s a fairly simple but illustrative page design:
- It is better to encapsulate all work with objects in functions to separate the areas of global and local variables
- Identify values with default values (
null) - the best programming rule I have ever heard. Errors -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);
}
