我需要使用值连接线条，最初工作正常，但在某些时候动画不起作用。它应该像ECG图形。图形应该继续而不会停止切片数据
Sidekiq Provar continueAnimation = true;
$(document).ready(function () {
sendArray();
});
var ecgVAlues = [51, 59, 61, 66, 76, 88, 103, 110, 122, 132, 139, 154, 166, 178, 193, 210, 232, 254, 273, 286, 286, 278, 256, 212, 164, 122, 83, 51, 34, 15, 12, 2, 2, 5, 7, 0, -5, 0, 5, 0, 2, 5, 5, 5, 10, 12, 17, 17, 20, 22, 20, 22, 17, 17, 15, 12, 10, 7, 10, 12, 7, 5, 7, 7, 10, 5, 10, 12, 17, 17, 22, 20, 17, 20, 20, 22, 34, 46, 44, 49, 61, 51, 42, 32, 24, 10, 0, -2, -5, 0, 0, 2, -5, 56, 381, 884, 784, -12, -208, -22, -27, 7, -10, 2, 2, 7, 10, 10, 10, 17, 20, 29, 42, 46, 56, 66, 71, 81, 93, 112, 125, 149, 168, 186, 198, 205, 200, 173, 127, 83, 39, 2, -27, -56, -71, -81, -88, -95, -93, -90, -95, -100, -95, -100, -100, -105, -103, -105, -110, -110, -115, -117, -122, -129, -129, -139, -144, -149, -161, -168, -171, -181, -183, -186, -188, -193, -190, -193, -190, -190, -193, -193, -193, -195, -198, -195, -188, -188, -186, -181, -176, -161, -149, -142, -137, -112, -107, -117, -112, -117, -122, -127, -127, -122, -112, -105, -95, -88, -51, 190, 674, 793, 56, -291, -134, -110, -56, -81, -61, -61, -49, -46, -42, -34, -27, -12, 2, 12, 29, 44, 61, 78, 103, 127, 151, 176, 200, 229, 247, 264, 283, 288, 283, 259, 222, 195, 164, 139, 132, 122, 129, 132, 137, 144, 159, 154, 161, 168, 166, 171, 178, 186, 193, 190, 188, 193, 188, 183, 181, 181, 176, 171, 178, 178, 168, 164, 164, 166, 164, 161, 159, 154, 156, 154, 154, 146, 139, 139, 137, 134, 129, 129, 127, 137, 144, 156, 149, 159, 166, 146, 139, 129, 120, 107, 103, 95, 98, 103, 103, 100, 95, 242, 679, 1079, 593, -51, -22, 81, 85, 83, 88, 83, 95, 100, 100, 107, 105, 110, 120, 122, 129, 144, 149, 151, 159, 171, 188, 208, 234, 264, 288, 310, 325, 327, 310, 276, 232, 181, 132, 88, 61, 44, 32, 24, 17, 12, 7, 12, 20, 2, -2, 0, -7, -20, -27, -27, -32, -44, -59, -71, -78, -78, -78, -78, -78, -90, -103, -117, -129, -134, -134, -132, -129, -120, -112, -110, -105, -107, -103, -100, -103, -105, -107, -110, -103, -88, -73, -73, -66, -44, -46, -54, -59, -68, -81, -90, -93, -93, -88, -85, -85, -88, -56, 195, 701, 862, 81, -293, -100, -95, -51, -68, -49, -44, -29, -17, -7, -2, 7, 20, 34, 51, 71, 78, 95, 110, 127, 144, 156, 178, 193, 215, 234, 244, 247, 237, 215, 166, 112, 61, 17, -20, -42, -56, -66, -66, -66, -68, -66, -59, -59, -63, -59, -54, -56, -61, -56, -61, -63, -61, -61, -63, -66, -66, -68, -71, -76, -81, -88, -93, -100, -107, -115, -122, -127, -132, -134, -137, -142, -142, -149, -149, -151, -156, -159, -161, -159, -149, -137, -132, -132, -112, -103, -115, -117, -129, -144, -154, -161, -159, -156, -154, -144, -146, -132, 49, 522, 811, 161, -327, -215, -161, -112, -125, -110, -105, -93, -88, -78, -73, -66, -56, -44, -34, -24, -12, 2, 7, 17, 39, 59, 78, 100, 117, 139, 154, 161, 164, 142, 103, 61, 15, -24, -59, -83, -98, -105, -110, -107, -105, -103, -100, -95, -93, -85, -83, -73, -68, -61, -56, -49, -42, -39, -34, -32, -27, -24, -22, -20, -22, -17, -17, -17, -17, -12, -7, -7, -5, -5, -2, -2, 0, 0, 0, 0, 5, 10, 12, 15, 17, 24, 42, 54, 51, 68, 88, 81, 76, 71, 56, 49, 44, 42, 49, 54, 59, 63, 61, 149, 505, 952, 769, 17, -125, 51, 49, 83, 71, 83, 88, 95, 100, 105, 105, 117, 127, 134, 146, 156, 166, 178, 186, 200, 215, 227, 249, 266, 288, 303, 317, 317, 310, 283, 237, 186, 146, 105, 71, 54, 44, 34, 27, 24, 24, 27, 29, 24, 22, 29, 29, 32, 34, 39, 42, 44, 46, 49, 49, 51, 51, 49, 49, 44, 44, 44, 39, 34, 34, 34, 32, 29, 29, 32, 29, 27, 27, 24, 22, 22, 24, 22, 22, 22, 22, 22, 24, 34, 46, 54, 56, 71, 73, 61, 61, 51, 34, 27, 15, 15, 20, 20, 22, 17, 34, 220, 703, 996, 361, -166, -63, 2, 27, 17, 27, 27, 37, 39, 44, 44, 51, 59, 71, 83, 90, 105, 122, 129, 144, 159, 173, 193, 215, 242, 261, 276, 286, 286, 271, 232, 181, 137, 100, 54, 24, 12, -2, -5, -12, -12, -17, -17, -7, -17, -20, -10, -10, -10, -5, -2, 0, 0, 2, 7, 7, 5, 5, 2, 0, 0, -7, -5, -12, -17, -17, -22, -22, -20, -24, -22, -20, -24, -22, -22, -17, -17, -22, -17, -20, -20, -17, -22, -17, -15, -2, 10, 7, 15, 32, 27, 17, 12, 2, -12, -20, -22, -22, -15, -12, -15, -17, 37, 330, 847, 884, 56, -232, -34, -44, -5, -27, -7, -10, 0, 2, 5, 10, 17, 27, 39, 54, 66, 83, 95, 110, 129, 139, 161, 181, 203, 227, 249, 264, 269, 264, 242, 205, 154, 110, 66, 29, 5, -15, -20, -29, -39, -49, -54, -46, -51, -61, -61, -59, -56, -49, -44, -34, -27, -22, -20, -15, -7, -5, 0, 2, 0, 5, 0, 2, 7, 2, 0, 2, 0, -2, -7, -12, -20, -27, -37, -44, -54, -59, -59, -66, -68, -71, -73, -71, -61, -56, -59, -61, -44, -56, -76, -83, -98, -112, -120, -132, -134, -129, -127, -125, -129, -88, 171, 691, 786, -12, -337, -166, -154, -110, -132, -117, -110, -100, -98, -93, -88, -76, -66, -54, -42, -27, -12, -5, 7, 27, 42, 61, 83, 105, 132, 154, 171, 178, 176, 154, 115, 63, 15, -29, -71, -100, -120, -137, -144, -151, -154, -159, -159, -164, -166, -161, -161, -161, -161, -156, -161, -156, -156, -159, -156, -159, -159, -164, -161, -166, -173, -173, -178, -181, -178, -178, -178, -178, -176, -168, -171, -164, -156, -149, -142, -139, -132, -122, -110, -105, -93, -76, -59, -39, -34, -12, 2, 2, 7, 7, 2, 7, 7, 17, 32, 44, 59, 63, 71, 215, 635, 1016, 557, -51, -34, 78, 107, 112, 127, 137, 149, 154, 161, 161, 159, 166, 176, 183, 188, 198, 208, 217, 227, 234, 249, 261, 276, 291, 308, 322, 325, 320, 305, 271, 220, 171, 122, 78, 49, 24, 15, 7, 2, 0, -7, -2, -2, -15, -12, -2, 0, 0, 10, 17, 22, 24, 34, 34, 34, 39, 37, 34, 34, 34, 34, 34, 32, 34, 37, 34, 39, 39, 39, 39, 37, 37, 32, 27, 27, 22, 10, 7, 5, -5, 0, -2, 2, 12, 17, 10, 17, 24, 7, 2, -2, -15, -22, -22, -22, -17, -10, -5, -5, -10, 83, 449, 920, 754, -37, -188, 0, -22, 5, -5, 0, 2, 10, 7, 12, 10, 17, 27, 39, 54, 66, 73, 83, 98, 107, 120, 134, 154, 173, 193, 210, 217, 217, 208, 176, 132, 78, 32, -10, -49, -73, -95, -107, -122, -129, -134, -149, -146, -144, -161, -164, -154, -154, -151, -144, -132, -132, -122, -112, -105, -107, -95, -88, -83, -76, -66, -56, -54, -46, -37, -29, -20, -10, -5, 5, 15, 20, 27, 32, 39, 44, 42, 44, 44, 42, 44, 37, 37, 37, 39, 42, 37, 32, 49, 42, 24, 22, 12, 0, -10, -24, -29, -27, -37, -44, -59, -54, 144, 613, 908, 239, -291, -178, -137, -112, -132, -117, -122, -112, -107, -98, -93, -83, -66, -51, -34, -17, 5, 24, 37, 56, 71, 88, 105, 132, 161, 188, 212, 232, 239, 234, 210, 168, 134, 95, 49, 29, 12, 0, 0, -5, -5, -2, -5, 7, 7, 0, 5, 12, 10, 10, 15, 15, 10, 10, 10, 5, 2, 0, 0, -2, -7, -10, -17, -24, -27, -39, -44, -56, -61, -73, -88, -95, -103, -117, -120, -129, -139, -146, -156, -156, -171, -173, -178, -188, -198, -193, -193, -186, -188, -173, -166, -183, -183, -198, -205, -215, -222, -220, -222, -217, -215, -217, -217, -66, 381, 774, 310, -334, -327, -210, -193, -188, -183, -176, -168, -164, -159, -154, -149, -142, -134, -132, -125, -112, -110, -107, -100, -93, -78, -61, -44, -22, 0, 20, 32, 34, 27, -5, -46, -98, -144, -183, -212, -232, -242, -247, -251, -254, -254, -251, -244, -242, -244, -237, -232, -227, -222, -217, -212, -210, -208, -200, -200, -195, -193, -190, -188, -188, -190, -186, -181, -181, -178, -173, -171, -171, -168, -164, -164, -156, -154, -154, -149, -139, -134, -129, -125, -117, -103, -83, -73, -66, -46, -29, -34, -34, -39, -46, -51, -54, -54, -46, -42, -34, -29, -27, 78, 454, 857, 562, -115, -193, -44, -24, 5, 0, 12, 22, 29, 39, 42, 42, 56, 63, 71, 83, 95, 107, 122, 132, 144, 161, 186, 203, 225, 247, 266, 278, 278, 269, 242, 200, 149, 110, 66, 37, 17, 5, 2, 0, 0, -5, 2, 7, 5, 7, 15, 17, 22, 24, 29, 34, 39, 42, 44, 46, 46, 49, 54, 49, 46, 44, 44, 39, 37, 34, 29, 29, 29, 29, 27, 24, 20, 17, 15, 12, 10, 10, 7, 5, 5, 5, 5, 20, 24, 22, 27, 42, 32, 20, 10, -2, -17, -24, -32, -29, -24, -22, -27, -27, 32, 325, 835, 876, 61, -229, -29, -39, 0, -12, 5, 7, 24, 29, 37, 39, 51, 61, 76, 88, 98, 110, 120, 134, 149, 161, 181, 203, 225, 249, 271, 283, 291, 283, 259, 220, 168, 125, 76, 37, 17, -5, -20, -27, -34, -37, -46, -49, -42, -56, -66, -56, -56, -59, -56, -49, -46, -39, -37, -34, -34, -29, -27, -27, -27, -24, -22, -20, -17, -20, -12, -12, -10, -5, 0, 0, 2, 7, 7, 10, 12, 12, 17, 17, 17, 15, 17, 22, 27, 37, 37, 34, 49, 44, 24, 12, -2, -20, -34, -42, -46, -44, -46, -44, -51, -44, 115, 564, 923, 391, -208, -159, -68, -54, -61, -54, -61, -56, -59, -56, -61, -59, -49, -39, -32, -20, -10, -2, 7, 22, 39, 59, 78, 103, 134, 164, 186, 203, 210, 205, 183, 139, 95, 61, 27, 5, -5, -12, -5, -5, -2, 0, 0, 17, 17, 7, 17, 20, 17, 15, 22, 24, 27, 24, 27, 20, 15, 5, 0, -15, -29, -44, -59, -71, -83, -90, -98, -103, -110, -115, -122, -122, -127, -129, -132, -134, -134, -132, -127, -120, -115, -105, -100, -95, -85, -73, -66, -61, -61, -44, -39, -54, -49, -51, -54, -59, -61, -59, -49, -49, -42, -42, -37, 144, 615, 945, 354, -212, -149, -83, -66, -78, -71, -73, -68, -63, -61, -61, -56, -56, -49, -42, -39, -32, -27, -22, -17, -10, 0, 17, 39, 61, 78, 93, 100, 98, 81, 51, 2, -51, -98, -142, -171, -183, -193, -198, -200, -203, -205, -203, -198, -203, -205, -203, -200, -203, -200, -200, -198, -193, -193, -188, -186, -183, -178, -176, -173, -171, -171, -171, -171, -173, -168, -171, -168, -164, -164, -161, -161, -156, -156, -156, -151, -149, -149, -142, -142, -139, -129, -117, -115, -115, -98, -95, -107, -110, -115, -122, -132, -142, -139, -134, -132, -127, -127, -127, -12, 388, 757, 366, -254, -283, -166, -129, -112, -110, -103, -93, -85, -83, -73, -63, -54, -42, -24, -10, 7, 27, 44, 61, 81, 103, 129, 154, 181, 212, 234, 251, 256, 254, 229, 190, 144, 107, 71, 42, 24, 12, 2, 0, 0, 0, 5, 5, 0, 5, 2, 5, 7, 12, 15, 20, 24, 27, 24, 29, 29, 27, 29, 32, 27, 24, 24, 24, 22, 17, 20, 20, 22, 20, 22, 27, 22, 24, 27, 29, 27, 27, 34, 46, 59, 59, 66, 83, 78, 68, 66, 54, 39, 27, 22, 17, 24, 22, 22, 17, 56, 310, 815, 964, 190, -200, -24, -12, 20, 5, 20, 15, 34, 34, 37, 39, 42, 54, 63, 73, 85, 100, 110, 120, 139, 146, 159, 176, 200, 222, 244, 254, 269, 264, 249, 210, 161, 117, 73, 39, 22, 0, -5, -7, -12, -17, -24, -24, -15, -15, -27, -22, -17, -17, -15, -7, -7, -5, -2, -2, 0, -2, 0, -5, -5, -10, -17, -17, -24, -29, -34, -37, -34, -32, -34, -37, -34, -42, -42, -44, -46, -49, -44, -44, -42, -46, -46, -44, -34, -22, -17, -20, -7, 0, -15, -22, -27, -37, -49, -49, -54, -51, -49, -46, -44, -51, 49, 417, 896, 713, -76, -225, -44, -63, -44, -49, -39, -39, -27, -24, -17, -17, -10, 2, 10, 24, 44, 54, 63, 73, 83, 95, 110, 129, 154, 178, 205, 225, 232, 229, 220, 183, 139, 103, 66, 37, 22, 12, 10, 10, 12, 17, 12, 20, 29, 22, 17, 27, 24, 22, 22, 22, 22, 22, 20, 17, 10, 7, 0, -5, -7, -15, -17, -27, -34, -37, -37, -34, -37, -34, -37, -34, -34, -34, -37, -44, -46, -49, -56, -61, -68, -78, -83, -88, -88, -85, -78, -78, -83, -63, -61, -71, -76, -81, -83, -88, -93, -90, -88, -85, -78, -83, -81, 73, 520, 906, 422, -227, -205, -95, -85, -88, -76, -73, -63, -61, -54, -54, -49, -44, -39, -32, -22, -24, -32, -46, -56, -56, -54, -39, -27, -5, 17, 37, 56, 63, 51, 29, -12, -71, -120, -166, -205, -227, -244, -251, -254, -254, -249, -247, -232, -227, -227, -222, -215, -212, -212, -200, -195, -188, -183, -176, -166, -159, -151, -149, -146, -142, -139, -142, -144, -144, -146, -146, -146, -149, -154, -156, -161, -166, -171, -173, -176, -183, -188, -190, -190, -193, -195, -200, -200, -193, -188, -188, -188, -178, -171, -183, -190, -198, -208, -220, -222, -222, -217, -217, -220, -220, -222, -132, 215, 632, 403, -308, -449, -327, -337, -322, -349, -325, -315, -293, -264, -232, -200, -166, -132, -107, -85, -63, -46, -24, 0, 24, 61, 98, 137, 183, 222, 256, 291, 308, 315, 310, 276, 254, 210, 151, 129, 100, 78, 56, 22, -7, -29, -39, -49, -54, -49, -44, -39, -32, -24, -22, -22, -17, -15, -20, -20, -22, -27, -29, -34, -34, -39, -42, -44, -44, -44, -39, -46, -51, -56, -61, -68, -71, -78, -76, -71, -63, -56, -49, -44, -27, -12, -10, -5, 12, 10, 0, 0, -5, -17, -22, -22, -10, 0, 2, 15, 17, 49, 276, 774, 996, 281, -161, -10, 34, 68, 59, 78, 78, 93, 100, 107, 112, 117, 122, 129, 142, 151, 161, 168, 176, 183, 193, 203, 215, 229, 242, 254, 271, 276, 271, 254, 220, 171, 112, 66, 27, -2, -20, -37, -42, -46, -49, -54, -56, -49, -44, -59, -54, -44, -46, -49, -39, -32, -32, -27, -24, -20, -17, -12, -7, -7, -7, -10, -17, -29, -44, -59, -71, -78, -85, -93, -98, -98, -100, -95, -95, -90, -85, -85, -83, -83, -83, -81, -71, -56, -44, -34, -2, 10, 10, 20, 20, 20, 22, 22, 24, 29, 29, 29, 27, 39, 225, 698, 1006, 386, -173, -88, -22, -15, -29, -22, -27, -22, -24, -17, -20, -20, -15, -12, -12, -7, -5, 0, 5, 10, 22, 32, 37, 51, 66, 83, 100, 115, 127, 125, 112, 81, 46, 15, -17, -37, -51, -66, -68, -76, -78, -83, -88];
function sendArray() {
//debugger;
var array_of_sets = ecgVAlues.slice(0, 101);
console.log("1");
animate(array_of_sets);
}
var x = 0;
function animate(data) {
console.log("2");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var constant = canvas.height / 2;
var panAtX = canvas.width;
if (data.length != 0) {
console.log("3");
for (var i = 0; i < data.length; i++) {
console.log("for " + data.length);
if (x++ < panAtX) {
var temp = data[i];
var final = constant - (temp);
var divFinal = (final/10) + constant;
ctx.fillRect(x, divFinal, 1, 1);
ctx.lineTo(x, divFinal);
ctx.stroke();
}
else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath(); // reset the path
for (var xx = 0; xx < data.length; xx++) {
var y = data[i-data.length+xx ];
var final = constant - (y);
var divFinals = (final/10) + constant;
ctx.fillRect(xx, divFinals, 1, 1);
ctx.lineTo(xx, divFinals);
}
ctx.stroke();
}
}
}
if (continueAnimation) {
requestAnimationFrame(sendArray);
}
}
$("#stop").click(function() {
continueAnimation = false;
});body {
background-color: ivory;
}
#canvas {
border: 1px solid red;
}
提前致谢
答案 0 :(得分：1)
问题是，当x变得大于panAtx时，你会尝试向左移动线条，但最终会得到绘图点，而不是线条
我在这里改变你的动画功能
var constant=351;
function animate() {
if (x > data.length - 1) {
return;
}
if (continueAnimation) {
requestAnimationFrame(animate);
}
if (x++ < panAtX) {
var temp = data[x];
var final = constant-(temp);
ctx.fillRect(x, final, 1, 1);
ctx.lineTo(x, final);
ctx.stroke();
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath(); // reset the path
for (var xx = 0; xx < panAtX; xx++) {
var y = data[x - panAtX + xx];
var final = constant - (y);
ctx.fillRect(xx, final, 1, 1);
ctx.lineTo(xx, final);
}
ctx.stroke();
}
}
我所做的更改是使用else块
请注意，我将常量变量移到了外面，因为我们每次都使用它。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = [51, 59, 61, 66, 76, 88, 103, 110, 122, 132, 139, 154, 166, 178, 193, 210, 232, 254, 273, 286, 286, 278, 256, 212, 164, 122, 83, 51, 34, 15, 12, 2, 2, 5, 7, 0, -5, 0, 5, 0, 2, 5, 5, 5, 10, 12, 17, 17, 20, 22, 20, 22, 17, 17, 15, 12, 10, 7, 10, 12, 7, 5, 7, 7, 10, 5, 10, 12, 17, 17, 22, 20, 17, 20, 20, 22, 34, 46, 44, 49, 61, 51, 42, 32, 24, 10, 0, -2, -5, 0, 0, 2, -5, 56, 381, 884, 784, -12, -208, -22, -27, 7, -10, 2, 2, 7, 10, 10, 10, 17, 20, 29, 42, 46, 56, 66, 71, 81, 93, 112, 125, 149, 168, 186, 198, 205, 200, 173, 127, 83, 39, 2, -27, -56, -71, -81, -88, -95, -93, -90, -95, -100, -95, -100, -100, -105, -103, -105, -110, -110, -115, -117, -122, -129, -129, -139, -144, -149, -161, -168, -171, -181, -183, -186, -188, -193, -190, -193, -190, -190, -193, -193, -193, -195, -198, -195, -188, -188, -186, -181, -176, -161, -149, -142, -137, -112, -107, -117, -112, -117, -122, -127, -127, -122, -112, -105, -95, -88, -51, 190, 674, 793, 56, -291, -134, -110, -56, -81, -61, -61, -49, -46, -42, -34, -27, -12, 2, 12, 29, 44, 61, 78, 103, 127, 151, 176, 200, 229, 247, 264, 283, 288, 283, 259, 222, 195, 164, 139, 132, 122, 129, 132, 137, 144, 159, 154, 161, 168, 166, 171, 178, 186, 193, 190, 188, 193, 188, 183, 181, 181, 176, 171, 178, 178, 168, 164, 164, 166, 164, 161, 159, 154, 156, 154, 154, 146, 139, 139, 137, 134, 129, 129, 127, 137, 144, 156, 149, 159, 166, 146, 139, 129, 120, 107, 103, 95, 98, 103, 103, 100, 95, 242, 679, 1079, 593, -51, -22, 81, 85, 83, 88, 83, 95, 100, 100, 107, 105, 110, 120, 122, 129, 144, 149, 151, 159, 171, 188, 208, 234, 264, 288, 310, 325, 327, 310, 276, 232, 181, 132, 88, 61, 44, 32, 24, 17, 12, 7, 12, 20, 2, -2, 0, -7, -20, -27, -27, -32, -44, -59, -71, -78, -78, -78, -78, -78, -90, -103, -117, -129, -134, -134, -132, -129, -120, -112, -110, -105, -107, -103, -100, -103, -105, -107, -110, -103, -88, -73, -73, -66, -44, -46, -54, -59, -68, -81, -90, -93, -93, -88, -85, -85, -88, -56, 195, 701, 862, 81, -293, -100, -95, -51, -68, -49, -44, -29, -17, -7, -2, 7, 20, 34, 51, 71, 78, 95, 110, 127, 144, 156, 178, 193, 215, 234, 244, 247, 237, 215, 166, 112, 61, 17, -20, -42, -56, -66, -66, -66, -68, -66, -59, -59, -63, -59, -54, -56, -61, -56, -61, -63, -61, -61, -63, -66, -66, -68, -71, -76, -81, -88, -93, -100, -107, -115, -122, -127, -132, -134, -137, -142, -142, -149, -149, -151, -156, -159, -161, -159, -149, -137, -132, -132, -112, -103, -115, -117, -129, -144, -154, -161, -159, -156, -154, -144, -146, -132, 49, 522, 811, 161, -327, -215, -161, -112, -125, -110, -105, -93, -88, -78, -73, -66, -56, -44, -34, -24, -12, 2, 7, 17, 39, 59, 78, 100, 117, 139, 154, 161, 164, 142, 103, 61, 15, -24, -59, -83, -98, -105, -110, -107, -105, -103, -100, -95, -93, -85, -83, -73, -68, -61, -56, -49, -42, -39, -34, -32, -27, -24, -22, -20, -22, -17, -17, -17, -17, -12, -7, -7, -5, -5, -2, -2, 0, 0, 0, 0, 5, 10, 12, 15, 17, 24, 42, 54, 51, 68, 88, 81, 76, 71, 56, 49, 44, 42, 49, 54, 59, 63, 61, 149, 505, 952, 769, 17, -125, 51, 49, 83, 71, 83, 88, 95, 100, 105, 105, 117, 127, 134, 146, 156, 166, 178, 186, 200, 215, 227, 249, 266, 288, 303, 317, 317, 310, 283, 237, 186, 146, 105, 71, 54, 44, 34, 27, 24, 24, 27, 29, 24, 22, 29, 29, 32, 34, 39, 42, 44, 46, 49, 49, 51, 51, 49, 49, 44, 44, 44, 39, 34, 34, 34, 32, 29, 29, 32, 29, 27, 27, 24, 22, 22, 24, 22, 22, 22, 22, 22, 24, 34, 46, 54, 56, 71, 73, 61, 61, 51, 34, 27, 15, 15, 20, 20, 22, 17, 34, 220, 703, 996, 361, -166, -63, 2, 27, 17, 27, 27, 37, 39, 44, 44, 51, 59, 71, 83, 90, 105, 122, 129, 144, 159, 173, 193, 215, 242, 261, 276, 286, 286, 271, 232, 181, 137, 100, 54, 24, 12, -2, -5, -12, -12, -17, -17, -7, -17, -20, -10, -10, -10, -5, -2, 0, 0, 2, 7, 7, 5, 5, 2, 0, 0, -7, -5, -12, -17, -17, -22, -22, -20, -24, -22, -20, -24, -22, -22, -17, -17, -22, -17, -20, -20, -17, -22, -17, -15, -2, 10, 7, 15, 32, 27, 17, 12, 2, -12, -20, -22, -22, -15, -12, -15, -17, 37, 330, 847, 884, 56, -232, -34, -44, -5, -27, -7, -10, 0, 2, 5, 10, 17, 27, 39, 54, 66, 83, 95, 110, 129, 139, 161, 181, 203, 227, 249, 264, 269, 264, 242, 205, 154, 110, 66, 29, 5, -15, -20, -29, -39, -49, -54, -46, -51, -61, -61, -59, -56, -49, -44, -34, -27, -22, -20, -15, -7, -5, 0, 2, 0, 5, 0, 2, 7, 2, 0, 2, 0, -2, -7, -12, -20, -27, -37, -44, -54, -59, -59, -66, -68, -71, -73, -71, -61, -56, -59, -61, -44, -56, -76, -83, -98, -112, -120, -132, -134, -129, -127, -125, -129, -88, 171, 691, 786, -12, -337, -166, -154, -110, -132, -117, -110, -100, -98, -93, -88, -76, -66, -54, -42, -27, -12, -5, 7, 27, 42, 61, 83, 105, 132, 154, 171, 178, 176, 154, 115, 63, 15, -29, -71, -100, -120, -137, -144, -151, -154, -159, -159, -164, -166, -161, -161, -161, -161, -156, -161, -156, -156, -159, -156, -159, -159, -164, -161, -166, -173, -173, -178, -181, -178, -178, -178, -178, -176, -168, -171, -164, -156, -149, -142, -139, -132, -122, -110, -105, -93, -76, -59, -39, -34, -12, 2, 2, 7, 7, 2, 7, 7, 17, 32, 44, 59, 63, 71, 215, 635, 1016, 557, -51, -34, 78, 107, 112, 127, 137, 149, 154, 161, 161, 159, 166, 176, 183, 188, 198, 208, 217, 227, 234, 249, 261, 276, 291, 308, 322, 325, 320, 305, 271, 220, 171, 122, 78, 49, 24, 15, 7, 2, 0, -7, -2, -2, -15, -12, -2, 0, 0, 10, 17, 22, 24, 34, 34, 34, 39, 37, 34, 34, 34, 34, 34, 32, 34, 37, 34, 39, 39, 39, 39, 37, 37, 32, 27, 27, 22, 10, 7, 5, -5, 0, -2, 2, 12, 17, 10, 17, 24, 7, 2, -2, -15, -22, -22, -22, -17, -10, -5, -5, -10, 83, 449, 920, 754, -37, -188, 0, -22, 5, -5, 0, 2, 10, 7, 12, 10, 17, 27, 39, 54, 66, 73, 83, 98, 107, 120, 134, 154, 173, 193, 210, 217, 217, 208, 176, 132, 78, 32, -10, -49, -73, -95, -107, -122, -129, -134, -149, -146, -144, -161, -164, -154, -154, -151, -144, -132, -132, -122, -112, -105, -107, -95, -88, -83, -76, -66, -56, -54, -46, -37, -29, -20, -10, -5, 5, 15, 20, 27, 32, 39, 44, 42, 44, 44, 42, 44, 37, 37, 37, 39, 42, 37, 32, 49, 42, 24, 22, 12, 0, -10, -24, -29, -27, -37, -44, -59, -54, 144, 613, 908, 239, -291, -178, -137, -112, -132, -117, -122, -112, -107, -98, -93, -83, -66, -51, -34, -17, 5, 24, 37, 56, 71, 88, 105, 132, 161, 188, 212, 232, 239, 234, 210, 168, 134, 95, 49, 29, 12, 0, 0, -5, -5, -2, -5, 7, 7, 0, 5, 12, 10, 10, 15, 15, 10, 10, 10, 5, 2, 0, 0, -2, -7, -10, -17, -24, -27, -39, -44, -56, -61, -73, -88, -95, -103, -117, -120, -129, -139, -146, -156, -156, -171, -173, -178, -188, -198, -193, -193, -186, -188, -173, -166, -183, -183, -198, -205, -215, -222, -220, -222, -217, -215, -217, -217, -66, 381, 774, 310, -334, -327, -210, -193, -188, -183, -176, -168, -164, -159, -154, -149, -142, -134, -132, -125, -112, -110, -107, -100, -93, -78, -61, -44, -22, 0, 20, 32, 34, 27, -5, -46, -98, -144, -183, -212, -232, -242, -247, -251, -254, -254, -251, -244, -242, -244, -237, -232, -227, -222, -217, -212, -210, -208, -200, -200, -195, -193, -190, -188, -188, -190, -186, -181, -181, -178, -173, -171, -171, -168, -164, -164, -156, -154, -154, -149, -139, -134, -129, -125, -117, -103, -83, -73, -66, -46, -29, -34, -34, -39, -46, -51, -54, -54, -46, -42, -34, -29, -27, 78, 454, 857, 562, -115, -193, -44, -24, 5, 0, 12, 22, 29, 39, 42, 42, 56, 63, 71, 83, 95, 107, 122, 132, 144, 161, 186, 203, 225, 247, 266, 278, 278, 269, 242, 200, 149, 110, 66, 37, 17, 5, 2, 0, 0, -5, 2, 7, 5, 7, 15, 17, 22, 24, 29, 34, 39, 42, 44, 46, 46, 49, 54, 49, 46, 44, 44, 39, 37, 34, 29, 29, 29, 29, 27, 24, 20, 17, 15, 12, 10, 10, 7, 5, 5, 5, 5, 20, 24, 22, 27, 42, 32, 20, 10, -2, -17, -24, -32, -29, -24, -22, -27, -27, 32, 325, 835, 876, 61, -229, -29, -39, 0, -12, 5, 7, 24, 29, 37, 39, 51, 61, 76, 88, 98, 110, 120, 134, 149, 161, 181, 203, 225, 249, 271, 283, 291, 283, 259, 220, 168, 125, 76, 37, 17, -5, -20, -27, -34, -37, -46, -49, -42, -56, -66, -56, -56, -59, -56, -49, -46, -39, -37, -34, -34, -29, -27, -27, -27, -24, -22, -20, -17, -20, -12, -12, -10, -5, 0, 0, 2, 7, 7, 10, 12, 12, 17, 17, 17, 15, 17, 22, 27, 37, 37, 34, 49, 44, 24, 12, -2, -20, -34, -42, -46, -44, -46, -44, -51, -44, 115, 564, 923, 391, -208, -159, -68, -54, -61, -54, -61, -56, -59, -56, -61, -59, -49, -39, -32, -20, -10, -2, 7, 22, 39, 59, 78, 103, 134, 164, 186, 203, 210, 205, 183, 139, 95, 61, 27, 5, -5, -12, -5, -5, -2, 0, 0, 17, 17, 7, 17, 20, 17, 15, 22, 24, 27, 24, 27, 20, 15, 5, 0, -15, -29, -44, -59, -71, -83, -90, -98, -103, -110, -115, -122, -122, -127, -129, -132, -134, -134, -132, -127, -120, -115, -105, -100, -95, -85, -73, -66, -61, -61, -44, -39, -54, -49, -51, -54, -59, -61, -59, -49, -49, -42, -42, -37, 144, 615, 945, 354, -212, -149, -83, -66, -78, -71, -73, -68, -63, -61, -61, -56, -56, -49, -42, -39, -32, -27, -22, -17, -10, 0, 17, 39, 61, 78, 93, 100, 98, 81, 51, 2, -51, -98, -142, -171, -183, -193, -198, -200, -203, -205, -203, -198, -203, -205, -203, -200, -203, -200, -200, -198, -193, -193, -188, -186, -183, -178, -176, -173, -171, -171, -171, -171, -173, -168, -171, -168, -164, -164, -161, -161, -156, -156, -156, -151, -149, -149, -142, -142, -139, -129, -117, -115, -115, -98, -95, -107, -110, -115, -122, -132, -142, -139, -134, -132, -127, -127, -127, -12, 388, 757, 366, -254, -283, -166, -129, -112, -110, -103, -93, -85, -83, -73, -63, -54, -42, -24, -10, 7, 27, 44, 61, 81, 103, 129, 154, 181, 212, 234, 251, 256, 254, 229, 190, 144, 107, 71, 42, 24, 12, 2, 0, 0, 0, 5, 5, 0, 5, 2, 5, 7, 12, 15, 20, 24, 27, 24, 29, 29, 27, 29, 32, 27, 24, 24, 24, 22, 17, 20, 20, 22, 20, 22, 27, 22, 24, 27, 29, 27, 27, 34, 46, 59, 59, 66, 83, 78, 68, 66, 54, 39, 27, 22, 17, 24, 22, 22, 17, 56, 310, 815, 964, 190, -200, -24, -12, 20, 5, 20, 15, 34, 34, 37, 39, 42, 54, 63, 73, 85, 100, 110, 120, 139, 146, 159, 176, 200, 222, 244, 254, 269, 264, 249, 210, 161, 117, 73, 39, 22, 0, -5, -7, -12, -17, -24, -24, -15, -15, -27, -22, -17, -17, -15, -7, -7, -5, -2, -2, 0, -2, 0, -5, -5, -10, -17, -17, -24, -29, -34, -37, -34, -32, -34, -37, -34, -42, -42, -44, -46, -49, -44, -44, -42, -46, -46, -44, -34, -22, -17, -20, -7, 0, -15, -22, -27, -37, -49, -49, -54, -51, -49, -46, -44, -51, 49, 417, 896, 713, -76, -225, -44, -63, -44, -49, -39, -39, -27, -24, -17, -17, -10, 2, 10, 24, 44, 54, 63, 73, 83, 95, 110, 129, 154, 178, 205, 225, 232, 229, 220, 183, 139, 103, 66, 37, 22, 12, 10, 10, 12, 17, 12, 20, 29, 22, 17, 27, 24, 22, 22, 22, 22, 22, 20, 17, 10, 7, 0, -5, -7, -15, -17, -27, -34, -37, -37, -34, -37, -34, -37, -34, -34, -34, -37, -44, -46, -49, -56, -61, -68, -78, -83, -88, -88, -85, -78, -78, -83, -63, -61, -71, -76, -81, -83, -88, -93, -90, -88, -85, -78, -83, -81, 73, 520, 906, 422, -227, -205, -95, -85, -88, -76, -73, -63, -61, -54, -54, -49, -44, -39, -32, -22, -24, -32, -46, -56, -56, -54, -39, -27, -5, 17, 37, 56, 63, 51, 29, -12, -71, -120, -166, -205, -227, -244, -251, -254, -254, -249, -247, -232, -227, -227, -222, -215, -212, -212, -200, -195, -188, -183, -176, -166, -159, -151, -149, -146, -142, -139, -142, -144, -144, -146, -146, -146, -149, -154, -156, -161, -166, -171, -173, -176, -183, -188, -190, -190, -193, -195, -200, -200, -193, -188, -188, -188, -178, -171, -183, -190, -198, -208, -220, -222, -222, -217, -217, -220, -220, -222, -132, 215, 632, 403, -308, -449, -327, -337, -322, -349, -325, -315, -293, -264, -232, -200, -166, -132, -107, -85, -63, -46, -24, 0, 24, 61, 98, 137, 183, 222, 256, 291, 308, 315, 310, 276, 254, 210, 151, 129, 100, 78, 56, 22, -7, -29, -39, -49, -54, -49, -44, -39, -32, -24, -22, -22, -17, -15, -20, -20, -22, -27, -29, -34, -34, -39, -42, -44, -44, -44, -39, -46, -51, -56, -61, -68, -71, -78, -76, -71, -63, -56, -49, -44, -27, -12, -10, -5, 12, 10, 0, 0, -5, -17, -22, -22, -10, 0, 2, 15, 17, 49, 276, 774, 996, 281, -161, -10, 34, 68, 59, 78, 78, 93, 100, 107, 112, 117, 122, 129, 142, 151, 161, 168, 176, 183, 193, 203, 215, 229, 242, 254, 271, 276, 271, 254, 220, 171, 112, 66, 27, -2, -20, -37, -42, -46, -49, -54, -56, -49, -44, -59, -54, -44, -46, -49, -39, -32, -32, -27, -24, -20, -17, -12, -7, -7, -7, -10, -17, -29, -44, -59, -71, -78, -85, -93, -98, -98, -100, -95, -95, -90, -85, -85, -83, -83, -83, -81, -71, -56, -44, -34, -2, 10, 10, 20, 20, 20, 22, 22, 24, 29, 29, 29, 27, 39, 225, 698, 1006, 386, -173, -88, -22, -15, -29, -22, -27, -22, -24, -17, -20, -20, -15, -12, -12, -7, -5, 0, 5, 10, 22, 32, 37, 51, 66, 83, 100, 115, 127, 125, 112, 81, 46, 15, -17, -37, -51, -66, -68, -76, -78, -83, -88];
// TESTING: fill data with some test values
//for (var i = 0; i < 5000; i++) {
// data.push(Math.sin(i / 10) * 70 + 100);
//}
var x = 0;
var panAtX = 250;
var continueAnimation = true;
animate();
var constant=351;
function animate() {
if (x > data.length - 1) {
return;
}
if (continueAnimation) {
requestAnimationFrame(animate);
}
if (x++ < panAtX) {
var temp = data[x];
var final = constant-(temp);
ctx.fillRect(x, final, 1, 1);
ctx.lineTo(x, final);
ctx.stroke();
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath(); // reset the path
for (var xx = 0; xx < panAtX; xx++) {
var y = data[x - panAtX + xx];
var final = constant - (y);
ctx.fillRect(xx, final, 1, 1);
ctx.lineTo(xx, final);
}
ctx.stroke();
}
}
$("#stop").click(function () {
continueAnimation = false;
});body {
background-color: ivory;
}
#canvas {
border:1px solid red;
}t<button id="stop">Stop</button>
<br>
<canvas id="canvas" width=300 height=701></canvas>