html5-canvas
пути

Эллипс

Примечание. Браузеры в процессе добавления встроенной команды рисования context.ellipse , но эта команда не применяется повсеместно (особенно в IE). Методы ниже работают во всех браузерах.

Нарисуйте эллипс, учитывая желаемую верхнюю левую координату:

// draws an ellipse based on x,y being top-left coordinate
function drawEllipse(x,y,width,height){
    var PI2=Math.PI*2;
    var ratio=height/width;
    var radius=Math.max(width,height)/2;
    var increment = 1 / radius;
    var cx=x+width/2;
    var cy=y+height/2;
    
    ctx.beginPath();
    var x = cx + radius * Math.cos(0);
    var y = cy - ratio * radius * Math.sin(0);
    ctx.lineTo(x,y);

    for(var radians=increment; radians<PI2; radians+=increment){ 
        var x = cx + radius * Math.cos(radians);
        var y = cy - ratio * radius * Math.sin(radians);
        ctx.lineTo(x,y);
     }

    ctx.closePath();
    ctx.stroke();
}

Нарисуйте эллипс, учитывая желаемую координату центральной точки:

// draws an ellipse based on cx,cy being ellipse's centerpoint coordinate
function drawEllipse2(cx,cy,width,height){
    var PI2=Math.PI*2;
    var ratio=height/width;
    var radius=Math.max(width,height)/2;
    var increment = 1 / radius;

    ctx.beginPath();
    var x = cx + radius * Math.cos(0);
    var y = cy - ratio * radius * Math.sin(0);
    ctx.lineTo(x,y);

    for(var radians=increment; radians<PI2; radians+=increment){ 
        var x = cx + radius * Math.cos(radians);
        var y = cy - ratio * radius * Math.sin(radians);
        ctx.lineTo(x,y);
     }

    ctx.closePath();
    ctx.stroke();
}

Линия без размытости

Когда Canvas рисует линию, он автоматически добавляет сглаживание, чтобы визуально излечить «зубчатость». Результатом является линия, которая менее зубчатая, но более размытая.

Эта функция рисует линию между двумя точками без сглаживания с использованием алгоритма Bresenham's_line . Результат - четкая линия без зубчатости.

Важное примечание. Этот пиксельно-пиксельный метод является гораздо более медленным методом рисования, чем context.lineTo .

// Usage:
bresenhamLine(50,50,250,250);

// x,y line start
// xx,yy line end
// the pixel at line start and line end are drawn
function bresenhamLine(x, y, xx, yy){
    var oldFill = ctx.fillStyle;  // save old fill style
    ctx.fillStyle = ctx.strokeStyle; // move stroke style to fill
    xx = Math.floor(xx);
    yy = Math.floor(yy);
    x = Math.floor(x);
    y = Math.floor(y);
    // BRENSENHAM 
    var dx =  Math.abs(xx-x); 
    var sx = x < xx ? 1 : -1;
    var dy = -Math.abs(yy-y);
    var sy = y<yy ? 1 : -1; 
    var err = dx+dy;
    var errC; // error value
    var end = false;
    var x1 = x;
    var y1 = y;

    while(!end){
       ctx.fillRect(x1, y1, 1, 1); // draw each pixel as a rect
        if (x1 === xx && y1 === yy) {
            end = true;
        }else{
            errC = 2*err;
            if (errC >= dy) { 
                err += dy; 
                x1 += sx; 
            }
            if (errC <= dx) { 
                err += dx; 
                y1 += sy; 
            } 
        }
    }
    ctx.fillStyle = oldFill; // restore old fill style
}