html代码
<body>
<div id="main">
<canvas id="mycanvas"></canvas>
<p id="technology"></p>
<p id="mainData"></p>
<p id="project"></p>
<p id="transportation"></p>
<p id="gray"></p>
<p id="red"></p>
<p id="blue"></p>
<p id="green"></p>
</div>
</body>
css代码
<style>
body,p,div{
margin:0;
padding: 0;
}
p{
display: inline-block;
position: absolute;
font-size: 2.6rem;
font-family: "SimHei";
color:#7c7c7c;
}
#technology{
top:238px;
left:115px;
}
#mainData{
top:73px;
left:263px;
text-align: right;
}
#project{
top:73px;
left:623px;
}
#transportation{
top:236px;
left:764px;
}
#gray{
top:573px;
left:100px;
}
#red{
top:647px;
left:96px;
}
#blue{
top:573px;
left:772px;
}
#green{
top:647px;
left:772px;
}
</style>
js:
<script>
window.οnlοad=function(){//取到当前屏幕的宽,高
var width=window.innerWidth;
var height=window.innerHeight;
//canvas的设置
var canvas=document.getElementById("mycanvas");
var cxt=canvas.getContext('2d');
canvas.width=width*0.95;
canvas.height=height*0.6;
//封装画圆的方法
function drawArc(x, y, radius, startAngle, endAngle, anticlockwise, isOnlyArc, isFill