Здравствуйте. Скажу сразу, что я начинающий программист. В чем суть: я хочу чтобы при скролле вниз у меня рисовался плавно контур (т.е. какое-то изображение в виде контура) и дойдя до конкретной области изображение должно полностью отрисоваться, если скроллить обратно вверх, то контур наоборот должен стираться. Для начала я хочу просто получить плавно рисующийся контур (в данном примере это совокупность прямых - линейных кривых Безье). В итоге я словил ошибку "Uncaught TypeError: Cannot read property '0' of undefined" на строке c комментарием //error. Я не могу понять, почему не могу получить массив значений и отрисовать контур. Пожалуйста, помогите :(
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
var getLineTo = function(myArr, step) {
if(step === undefined) {
step = 0.001;
}
var arr = [];
for (var t = 0; t < 1 + step; t += step) {
if (t > 1) {
t = 1;
}
for (var i = 0; i < myArr.length - 1; i++) {
var bx,
by;
bx = myArr[i][0] + t *(myArr[i+1][0] - myArr[i][0]); //error
by = myArr[i][1] + t *(myArr[i+1][1] - myArr[i][1]);
arr[i] = [bx, by];
}
}
return arr;
}
var drowLines = function(ctx, arr, delay, pause) {
if (delay === undefined) {
delay = 20;
}
if (pause === undefined) {
pause = delay;
}
function delayDraw() {
for (var i = 0; i < arr.length - 1; i++) {
ctx.moveTo(arr[i][0], arr[i][1]);
ctx.lineTo(arr[i+1][0], arr[i+1][1]);
ctx.stroke();
if (delay > 0) {
setTimeout(delayDraw, delay);
} else {
delayDraw();
}
}
}
if (pause > 0) {
setTimeout(delayDraw, pause);
} else {
delayDraw();
}
}
var myArray1 = [[10, 10], [100, 100], [158, 250]];
var mass;
mass = getLineTo(myArray1);
drowLines(ctx, mass, 30);