我正在尝试重叠画布，但浏览器未显示重叠
HTML 代码
<!DOCTYPE html />
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
<title>well Trajectory</title>
<link rel="Stylesheet" href="main.css" />
</head>
<body>
<div id="mainDiv">
<img id="loading" src="loading.gif" style=" position:relative; left:30%; top:30%" />
</div>
</body>
</html>
CSS 代码
body
{
background-color:#FFFFFF;
}
#mainDiv
{
margin:auto;
width:300px;
height:300px;
background-image:transparent;
position:relative ;
}
jQuery代码
function drawGauge(idParent, width, height) {
$('#loading').remove();
$canvasDiv = "<canvas id='gg_layer1'/>";
$(idParent).append($canvasDiv);
$('#gg_layer1').attr('width', width).attr('height', height).css('background-color', 'red').css('position', 'relative').css('z-index', 0).css('left', '0px').css('top', '0px');
}
function drawPointer(idParent, width, height, color) {
$('#loading').remove();
$canvasDiv = "<canvas id='gg_layer2'/>";
$(idParent).append($canvasDiv);
$('#gg_layer2').attr('width', width).attr('height', height).css('background-color', '#555555').css('position', 'relative').css('z-index', 1).css('left', '0px').css('top', '0px');
var center = width / 2;
}
$(document).ready(function() {
drawGauge('#mainDiv', $('#mainDiv').width(), $('#mainDiv').height());
drawPointer('#mainDiv', $('#mainDiv').width(), $('#mainDiv').height());
});