HTML and CSS Reference
In-Depth Information
The number of units to step when the range slider is moved
The default value of the range
Here is the markup we used to specify the range in the Text Arranger HTML:
<input type= "range" id= "textSize"
min= "0"
max= "200"
step= "1"
value= "50" //>
If the browser does not support this range control, it will be rendered as a text box.
At the time of this writing, range did not render in Firefox or any version of Internet Explorer 10.
Creating the necessary variables in the canvasApp() function
In the canvasApp() container function, we need to create four variables— fontSize ,
fontFace , fontWeight , and fontStyle —that will hold the values set by the HTML form
the first time the drawScreen() function is called. After that, drawScreen() will be called
onlywhena change eventishandledbyoneoftheeventhandlerfunctionsthatwewillcreate
for each form control:
var fontSize = "50" ;
var fontFace = "serif" ;
var fontWeight = "normal" ;
var fontStyle = "normal" ;
Setting event handlers in canvasApp()
ciated event handler functions so that changes on the HTML page form controls can interact
with HTML5 Canvas. All of the following event listeners listen for a change event on the
form control:
formElement = document . getElementById ( "textSize" );
formElement . addEventListener ( 'change' , textSizeChanged , false
false );
Search WWH ::

Custom Search