Untitled

<!DOCTYPE HTML>
<html>
<head>
<title>Ex</title>
<meta charset="utf-8">
<script type="text/javascript">

var plot = function(x, y, c) { // Установить пикселб в т. (x, y) с прозрачностью c
    if(isFinite(x) && isFinite(y)){
        var color = {
            r: plot.color.r,
            g: plot.color.g,
            b: plot.color.b,
            a: plot.color.a*c
        };

        setPixel(x,y, color);
    }
};

function setPixel (x,y,c) { // Функция установки пикселя в js
    var p=canvas.createImageData(1,1);
    p.data[0]=c.r;
    p.data[1]=c.g;
    p.data[2]=c.b;
    p.data[3]=c.a;
    var data = canvas.getImageData(x, y, 1,1).data;
    canvas.putImageData(p,x,y);
}


function drawSpline(color) {
    var args = Array.prototype.slice.call(arguments, 1);
    var coords = [];
    var num = 0;
    for(var i=0; i<args.length; i+=2){
        coords[i/2+1] = {X:args[i], Y:args[i+1]};
        if(i>0){
            var deltaX = coords[i/2+1].X - coords[i/2].X;
            var deltaY = coords[i/2+1].Y - coords[i/2].Y;
            num += Math.sqrt(deltaX*deltaX+deltaY*deltaY);
        }
    }
    coords[0] = coords[1];
    coords[coords.length] = coords[coords.length-1];
    plot.color = color;
    for (var i = 1; i <= coords.length-3; i++)// в цикле по всем четвёркам точек
    {
        var a = [], b = [];
        arrs = {a:a, b:b};
        _SplineCoefficient(i, arrs, coords);// считаем коэффициенты q   `
        var points = {};// создаём массив промежуточных точек
        for(var j=0;j<num;j++)
        {
           var t = j/num;// шаг интерполяции
            // передаём массиву точек значения по методу beta-spline
            points.X = (arrs.a[0] + t * (arrs.a[1] + t * (arrs.a[2] + t * arrs.a[3])));
            points.Y = (arrs.b[0] + t * (arrs.b[1] + t * (arrs.b[2] + t * arrs.b[3])));
            plot(points.X, points.Y,color.a/255);
        }

    }
}

function _SplineCoefficient(i, arrs, coords)// в функции рассчитываются коэффициенты a0-a3, b0-b3
{
    arrs.a[3] = (-coords[i - 1].X + 3*coords[i].X - 3*coords[i + 1].X + coords[i + 2].X)/6;
    arrs.a[2] = (coords[i - 1].X - 2*coords[i].X + coords[i + 1].X)/2;
    arrs.a[1] = (-coords[i - 1].X + coords[i + 1].X)/2;
    arrs.a[0] = (coords[i - 1].X + 4*coords[i].X + coords[i + 1].X)/6;
    arrs.b[3] = (-coords[i - 1].Y + 3*coords[i].Y - 3*coords[i + 1].Y + coords[i + 2].Y)/6;
    arrs.b[2] = (coords[i - 1].Y - 2*coords[i].Y + coords[i + 1].Y)/2;
    arrs.b[1] = (-coords[i - 1].Y + coords[i + 1].Y)/2;
    arrs.b[0] = (coords[i - 1].Y + 4*coords[i].Y + coords[i + 1].Y)/6;
}

</script>
</head>
<body style="margin: 0; height: 100vh;">
<script type="text/javascript">
    var canvasElem= document.createElement('canvas');
    canvasElem.id     = "canvas";
    canvasElem.width  = 600;
    canvasElem.height = 600;
    canvasElem.style.margin = 'auto';
    canvasElem.style.display = 'flex';
    document.body.appendChild(canvasElem);
    canvas = canvasElem.getContext('2d');
    canvasX = canvasElem.width;
    canvasY = canvasElem.height;
    drawSpline({r:255, g:0, b:0, a:255}, 100, 100, 250, 250, 400, 50, 0, 300, 50,400);


</script>
</body>