利用canvas实现disc测评结果视图展示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用canvas实现disc测评结果视图展示相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于利用canvas实现disc测评结果视图展示的主要内容，如果未能解决你的问题，请参考以下文章
你觉得最近爆火的MBTI性格测试靠谱吗？该如何判断其准确性呢？
Java项目:在线心理测评系统设计和实现(java+Springboot+ssm+mysql+jsp+maven)