HTML and CSS Reference
In-Depth Information
We also need to create the HTML to allow the user to update the shadow settings. We
do this with three range controls, as well as another color picker using jsColor :
Shadow X:<input type="range" id="shadowX"
min="−100"
max="100"
step="1"
value="1"/>
<br>
Shadow Y:<input type="range" id="shadowY"
min="−100"
max="100"
step="1"
value="1"/>
<br>
Shadow Blur: <input type="range" id="shadowBlur"
min="1"
max="100"
step="1"
value="1" />
<br>
Shadow Color: <input class="color" id="shadowColor" value="707070"/>
Finally, we need to add the event listeners and event handler functions so the HTML
form elements can communicate with the canvas. See the results in Figure 3-8 :
formElement = document.getElementById("shadowX");
formElement.addEventListener('change', shadowXChanged, false);
formElement = document.getElementById("shadowY");
formElement.addEventListener('change', shadowYChanged, false);
formElement = document.getElementById("shadowBlur");
formElement.addEventListener('change', shadowBlurChanged, false);
formElement = document.getElementById("shadowColor");
formElement.addEventListener('change', shadowColorChanged, false);
function shadowXChanged(e) {
var target = e.target;
shadowX = target.value;
drawScreen();
}
function shadowYChanged(e) {
var target = e.target;
shadowY = target.value;
drawScreen();
}
function shadowBlurChanged(e) {
var target = e.target;
shadowBlur = target.value;
drawScreen();
}
Search WWH ::




Custom Search