|
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 if(c.drawCustomFocusRing(in1)) { |
|
14 c.stroke(); |
|
15 } |
|
16 c.beginPath(); |
|
17 c.rect(10, 220, 200, 200); |
|
18 if(c.drawCustomFocusRing(in2)) { |
|
19 c.stroke(); |
|
20 } |
|
21 } |
|
22 in1.focus(); |
|
23 } |
|
24 </script> |
|
25 </head> |
|
26 <body> |
|
27 <canvas id="myCanvas" height="500" width="500" style="border:1px solid black"> |
|
28 <input id="in1" type="range" min="1" max="12"> |
|
29 <input id="in2" type="range" min="1" max="12"> |
|
30 </canvas> |
|
31 |
|
32 </body></html> |