HTML Canvas-пунктирный штрих по кругу

Question

HTML Canvas-пунктирный штрих по кругу

Я знаю, что нет собственной поддержки для выполнения пунктирных штриховых линий, отображаемых на холсте, но я видел умные способы, которыми люди могли генерировать поддержку для этого.

Мне интересно, есть ли какой-либо способ перевести это, чтобы обеспечить отображение пунктирных штрихов вокруг фигур (в частности, кругов)?

744 5

html5 canvas rendering dotted-line

5 ответов:

Comments

Ничего не найдено.

Loktar · Accepted Answer · 2011-06-09 20:03:30

Живая Демонстрация

calcPointsCirc принимает 4 аргумента, центр x/y, радиус и длину тире. Он возвращает массив точек x, y, ex, ey. Вы можете просто пройти через точки, чтобы нарисовать пунктирный круг. Есть, вероятно, гораздо более элегантные способы сделать это, но я решил, что это даст ему шанс.
function calcPointsCirc( cx,cy, rad, dashLength)
{
    var n = rad/dashLength,
        alpha = Math.PI * 2 / n,
        pointObj = {},
        points = [],
        i = -1;

    while( i < n )
    {
        var theta = alpha * i,
            theta2 = alpha * (i+1);

        points.push({x : (Math.cos(theta) * rad) + cx, y : (Math.sin(theta) * rad) + cy, ex : (Math.cos(theta2) * rad) + cx, ey : (Math.sin(theta2) * rad) + cy});
        i+=2;
    }              
    return points;            
} 


var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = canvas.height= 200;

var pointArray= calcPointsCirc(50,50,50, 1);
    ctx.strokeStyle = "rgb(255,0,0)";
    ctx.beginPath();

    for(p = 0; p < pointArray.length; p++){
        ctx.moveTo(pointArray[p].x, pointArray[p].y);
        ctx.lineTo(pointArray[p].ex, pointArray[p].ey);
        ctx.stroke();
    }

    ctx.closePath();

Blindy · Accepted Answer · 2011-06-09 18:46:13

Если все остальное не удается, вы всегда можете зациклить переменную от 0 до 2*pi, пропуская все элементы step и рисуя на каждом другом элементе step точки в sin(angle)*radius+centerx, cos(angle)*radius+centery.

Вот так, самодельный пунктирный круг :)

ryandesign · Accepted Answer · 2012-02-07 08:23:54

MyJavaScript Path library реализует пунктирное и пунктирное рисование произвольных путей (которые могут состоять из любого количества прямых или изогнутых сегментов), включая эллипсы. Загрузите его и ознакомьтесь с примерами.

Erdi İzgi · Accepted Answer · 2014-09-08 19:56:02

Я искал пунктирный круг для моей игры, и после прочтения всех страниц, которые я написал класс в машинописи, он работает очень хорошо. Если кто-то ищет пунктирный круг в машинописи, он здесь;

export class DashedCircle
{
    centerX: number;
    centerY: number;
    radius: number;
    color: string;
    dashSize: number;
    ctx: CanvasRenderingContext2D;

    constructor(ctx:CanvasRenderingContext2D, centerX: number, centerY: number, radius: number, color: string, dashSize: number)
    {
        this.ctx = ctx;
        this.centerX = centerX;
        this.centerY = centerY;
        this.radius = radius;
        this.color = color;
        this.dashSize = dashSize;
    }

    CalculateCirclePoints()
    {
        var n = this.radius / this.dashSize;
        var alpha = Math.PI * 2 / n;
        var pointObj = {};
        var points = [];
        var i = -1;

        while (i < n)
        {
            var theta = alpha * i;
            var theta2 = alpha * (i + 1);
            points.push({
                x: (Math.cos(theta) * this.radius) + this.centerX,
                y: (Math.sin(theta) * this.radius) + this.centerY,
                ex: (Math.cos(theta2) * this.radius) + this.centerX,
                ey: (Math.sin(theta2) * this.radius) + this.centerY });
                i += 2;
        }

        return points;
    }

    Draw()
    {
        var points = this.CalculateCirclePoints();
        this.ctx.strokeStyle = this.color;
        this.ctx.beginPath();
        for (var p = 0; p < points.length; p++)
        {
            this.ctx.moveTo(points[p].x, points[p].y);
            this.ctx.lineTo(points[p].ex, points[p].ey);
            this.ctx.stroke();
        }
        this.ctx.closePath();
    }
}

score 2 · Accepted Answer · 2017-10-22 08:31:49

Самый простой способ с использованием контекста .сетлинедаш()
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.beginPath();
ctx.arc(100, 60, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();