635302-1.html (756B)
1 <!DOCTYPE html> 2 <html><head> 3 <style> 4 #outer { 5 opacity: 0.8; 6 background-color:red; 7 width: 200px; 8 } 9 10 #inner { 11 opacity: 0.6; 12 background-color:black; 13 color:white; 14 } 15 16 </style> 17 </head> 18 <body> 19 <div id="outer"> 20 <canvas width="200" height="200" style="display:block;" id="c1"></canvas> 21 <div id="inner"> 22 <canvas width="200" height="400" style="display:block;" id="c2"></canvas> 23 </div> 24 </div> 25 26 27 <script> 28 var ctx = document.getElementById("c1").getContext("2d"); 29 ctx.fillStyle = "black"; 30 ctx.fillRect(0, 0, 200, 200); 31 var ctx = document.getElementById("c2").getContext("2d"); 32 ctx.fillStyle = "black"; 33 ctx.fillRect(0, 0, 200, 200); 34 ctx.fillStyle = "rgb(50,50,50)"; 35 ctx.fillRect(0, 200, 200, 200); 36 </script> 37 38 </body></html>