|
1 <!--docytpe html--> |
|
2 <html><head> |
|
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
|
4 <meta charset="UTF-8"> |
|
5 <script> |
|
6 window.onload=function(){ |
|
7 var c=document.getElementById("myCanvas").getContext("2d"); |
|
8 var in1=document.getElementById("in1"); |
|
9 var in2=document.getElementById("in2"); |
|
10 in1.onfocus=function(){ |
|
11 c.beginPath(); |
|
12 c.rect(10, 10, 200, 200); |
|
13 c.drawFocusIfNeeded(in1); |
|
14 c.beginPath(); |
|
15 c.rect(10, 220, 200, 200); |
|
16 c.drawFocusIfNeeded(in2); |
|
17 } |
|
18 in1.focus(); |
|
19 } |
|
20 </script> |
|
21 </head> |
|
22 <body> |
|
23 <canvas id="myCanvas" height="500" width="500" style="border:1px solid black"> |
|
24 <input id="in1" type="range" min="1" max="12"> |
|
25 <input id="in2" type="range" min="1" max="12"> |
|
26 </canvas> |
|
27 |
|
28 </body></html> |