标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>disc报告</title>
<link rel="stylesheet" href="">
<style>
.box {
width: 300px;
height: 300px;
position: relative;
}
.box:before {
content: ‘‘;
border-bottom: 1px solid #d3d3d3;
position: absolute;
top: 150px;
left: 25px;
width: 250px;
z-index: 9;
}
.box:after {
content: ‘‘;
border-left: 1px solid #d3d3d3;
position: absolute;
left: 150px;
top: 25px;
height: 250px;
z-index: 9;
}
.box canvas{
position: absolute;
z-index: 10;
}
.bg{
width: 0;
height: 0;
box-shadow: 0 0 0 17px #fefefe,
0 0 0 18px #d3d3d3,
0 0 0 35px #efefef,
0 0 0 36px #d3d3d3,
0 0 0 53px #fefefe,
0 0 0 54px #d3d3d3,
0 0 0 71px #efefef,
0 0 0 72px #d3d3d3,
0 0 0 89px #fefefe,
0 0 0 90px #d3d3d3;
position: absolute;
left: 150px;
top: 150px;
transform: rotateZ(45deg);
}
</style>
<script>
function draw(id){
var ctx = document.getElementById(id).getContext(‘2d‘);
ctx.beginPath();
ctx.moveTo(150,96);
ctx.lineTo(230,150);
ctx.lineTo(150,200);
ctx.lineTo(130,150);
ctx.lineTo(150,96);
ctx.strokeStyle="#ff7f50";
ctx.stroke();
}
</script>
</head>
<body onload="draw(‘disc‘)">
<div class="box">
<canvas id="disc" width="300px" height="300px"></canvas>
<div class="bg"></div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/niunaimidou/p/5506542.html
