mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-06 09:05:45 +00:00
39 lines
756 B
HTML
39 lines
756 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html><head>
|
||
|
|
<style>
|
||
|
|
#outer {
|
||
|
|
opacity: 0.8;
|
||
|
|
background-color:red;
|
||
|
|
width: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#inner {
|
||
|
|
opacity: 0.6;
|
||
|
|
background-color:black;
|
||
|
|
color:white;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="outer">
|
||
|
|
<canvas width="200" height="200" style="display:block;" id="c1"></canvas>
|
||
|
|
<div id="inner">
|
||
|
|
<canvas width="200" height="400" style="display:block;" id="c2"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var ctx = document.getElementById("c1").getContext("2d");
|
||
|
|
ctx.fillStyle = "black";
|
||
|
|
ctx.fillRect(0, 0, 200, 200);
|
||
|
|
var ctx = document.getElementById("c2").getContext("2d");
|
||
|
|
ctx.fillStyle = "black";
|
||
|
|
ctx.fillRect(0, 0, 200, 200);
|
||
|
|
ctx.fillStyle = "rgb(50,50,50)";
|
||
|
|
ctx.fillRect(0, 200, 200, 200);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body></html>
|