扇形比例表（猜涨跌）

最新推荐文章于 2023-06-05 17:12:36 发布

风的中心

最新推荐文章于 2023-06-05 17:12:36 发布

阅读量438

点赞数

本文链接：https://blog.csdn.net/u013716510/article/details/51035428

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航菜单</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
</head>
<body>
<div class="d">
<div class="left">看涨</div>
<div class="right">看跌</div>
<div style="clear: both;"></div>
</div>
</body>
<script src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
var z = 900;
var d = 400;
creatCanvas(z, d);

function creatCanvas(v1, v2) {
var t=parseInt(v2,10)/(parseInt(v1,10)+parseInt(v2,10))
var bit = (1 - t) * (1 / 3);
var screenWidth = window.screen.width;
var screenheight = window.screen.height;
var dem = '<canvas id="myCanvas" width="' + screenWidth + '" height="' + screenheight + '">ff</canvas>';
$("body").append(dem);
$("#myCanvas").css({
"background":"transparent",
"position":"absolute"
});
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
//半圆
//涨
ctx.beginPath();
ctx.strokeStyle = "#FF9600";
ctx.lineWidth = 30;
ctx.arc(screenWidth / 2, screenWidth + 50, screenWidth, -Math.PI, 0, false);
ctx.stroke();
ctx.save();
ctx.restore();

ctx.beginPath();
ctx.lineWidth = 8;
ctx.strokeStyle = "#FFC066";
ctx.arc(screenWidth / 2, screenWidth + 50, screenWidth + 12, -Math.PI, 0, false);
ctx.stroke();
ctx.save();
ctx.restore();
//跌
ctx.beginPath();
ctx.lineWidth = 30;
ctx.strokeStyle = "#6CBCFF";
ctx.arc(screenWidth / 2, screenWidth + 50, screenWidth, -Math.PI * (2 / 3 - bit), 0, false);
ctx.stroke();
ctx.save();
ctx.restore();

ctx.beginPath();
ctx.lineWidth = 8;
ctx.strokeStyle = "#A7D7FF";
ctx.arc(screenWidth / 2, screenWidth + 50, screenWidth + 12, -Math.PI * (2 / 3 - bit), 0, false);
ctx.stroke();
ctx.save();
ctx.restore();
//灰线
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "#E0E1E4";
ctx.arc(screenWidth / 2, screenWidth + 50, screenWidth - 20, -Math.PI, 0, false);
ctx.stroke();
ctx.save();
ctx.restore();
//指针
var x1 = screenWidth / 2 - (screenWidth + 20) * Math.cos(Math.PI * (1 / 3 + bit));
var y1 = screenWidth + 50 - (screenWidth + 20) * Math.sin(Math.PI * (1 / 3 + bit));
var x2 = screenWidth / 2 - (screenWidth - 15) * Math.cos(Math.PI * (1 / 3 + bit + 0.005));
var y2 = screenWidth + 50 - (screenWidth - 15) * Math.sin(Math.PI * (1 / 3 + bit + 0.005));
var x3 = screenWidth / 2 - (screenWidth - 15) * Math.cos(Math.PI * (1 / 3 + bit - 0.005));
var y3 = screenWidth + 50 - (screenWidth - 15) * Math.sin(Math.PI * (1 / 3 + bit - 0.005));
ctx.beginPath();
ctx.fillStyle = "#D5EAFD";
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.closePath();
ctx.fill();
//刻度
for (var i = 0; i <= 180; i += 2) {
var x = "";
var y = "";
var x1 = "";
var y1 = "";
ctx.save();
ctx.restore();
var x = screenWidth / 2 - (screenWidth + 40) * Math.cos(Math.PI * (i / 180));
var y = screenWidth + 50 - (screenWidth + 40) * Math.sin(Math.PI * (i / 180));
var x1 = screenWidth / 2 - (screenWidth + 35) * Math.cos(Math.PI * (i / 180));
var y1 = screenWidth + 50 - (screenWidth + 35) * Math.sin(Math.PI * (i / 180));
ctx.beginPath();
ctx.strokeStyle = "#EAECF0";
ctx.lineWidth = 1;
ctx.moveTo(x1, y1);
ctx.lineTo(x, y);
ctx.stroke();
}
}

});
</script>

</html>