黄金曲線図-canvas
4598 ワード
今日のプロジェクトでは、html 5の最新の特性を体現するために、時実的な黄金の動きの曲線図を描くことが要求されています.以下は具体的なシミュレーションコードです.
<div id="div1"><canvas id="cs1" width="600" height="420" style="background-color:white; border:1px solid green;"> canvas</canvas></div>
<script type="text/javascript">
var cs = document.getElementById('cs1');
var cxt = cs.getContext('2d');
var map = { w: 450, h: 320 }; //
var basePoint = { x: 80, y: 50 }; //
var intervalData = { l: ['1317.8900', '1319.9000', '1319.9100', '1323.9200', '1325.9300', '1327.9400', '1329.9500', '1331.9600', '1333.9700'], r: ['-0.61%', '-0.45%', '-0.30%', '-0.15%', '0.00%', '+0.15%', '+0.30%', '+0.45%', '+0.61%'] }; //
var time = ['08:00', '14:00', '20:00', '02:00'];
var legend = [{ color: '#E2007F', desc: ' ' }, { color: '#2358A6', desc: ' ' }];
var timer = null;
cxt.lineWidth = 1;
cxt.font = '12px ';
cxt.translate(basePoint.x, basePoint.y); //
//
function drawMap() {
cxt.clearRect(0, 0, cs.width, cs.height);
cxt.strokeStyle = '#000';
cxt.lineWidth = 1;
cxt.beginPath();
cxt.strokeRect(0, 0, map.w, map.h);
cxt.closePath();
//
for (var i = 0; i < 7; i++) {
cxt.strokeStyle = i == 3 ? '#000' : '#ccc';
cxt.beginPath();
cxt.moveTo(0, 40 * (i + 1));
cxt.lineTo(cs.width-150, 40 * (i + 1));
cxt.stroke();
cxt.closePath();
}
//
for (var i = 0; i < 3; i++) {
cxt.beginPath();
cxt.moveTo(112.5*(i+1), 0);
cxt.lineTo(112.5 * (i + 1), 320);
cxt.stroke();
cxt.closePath();
}
//
for (var i = 0, l = time.length; i < l; i++) {
cxt.fillStyle = '#999';
cxt.fillText(time[i], 2+112*i, 335);
}
//
for (var i = 0, l = intervalData.l.length; i < l; i++) {
if (i < 4) {
cxt.fillStyle = '#3BBD3B';
}else if (i == 4) {
cxt.fillStyle = '#000';
} else {
cxt.fillStyle = '#FF4343';
}
cxt.fillText(intervalData.l[i], -60, 325-40*i);
}
//
for (var i = 0, l = intervalData.r.length; i < l; i++) {
if (i < 4) {
cxt.fillStyle = '#3BBD3B';
} else if (i == 4) {
cxt.fillStyle = '#000';
} else {
cxt.fillStyle = '#FF4343';
}
cxt.fillText(intervalData.r[i], 452, 325-40*i);
}
//
for (var i = 0, l = legend.length; i < l; i++) {
cxt.beginPath();
cxt.strokeStyle = '#000';
cxt.strokeRect(400-50*i, -15, 10, 10);
cxt.fillStyle = legend[i].color;
cxt.fillRect(400-50*i, -15, 10, 10);
cxt.closePath();
cxt.fillStyle = '#000';
cxt.fillText(legend[i].desc, 365+50*i, -6);
}
}
//
var pos = { x: 0, y: 0 };
function drawCurve() {
cxt.strokeStyle = '#2358A6';
cxt.beginPath();
cxt.moveTo(pos.x, pos.y);
pos.x+=3;
if (pos.x > map.w) {
pos.x = 0;
cxt.clearRect(0, 0, cs.width, cs.height);
drawMap();
}
pos.y = map.h * Math.random();
cxt.lineTo(pos.x, pos.y);
cxt.stroke();
cxt.closePath();
}
drawMap();
timer = setInterval(drawCurve, 300);
</script>
#div1{
width:600px;
height:420px;
margin:10px auto;
}