html - HTMLキャンバス-円の周りの点線のストローク

Question

キャンバスに点線のストロークラインをレンダリングするためのネイティブサポートがないことは知っていますが、人々がこれをサポートするための巧妙な方法を見てきました。

私が疑問に思っているのは、これを変換して、図形（特に円）の周りに点線のストロークをレンダリングできるようにする方法があるかどうかです。

Answer 1

ライブデモ

calcPointsCirc中心の x/y、半径、ダッシュの長さの 4 つの引数を取ります。ポイントの配列 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();

Answer 2

他のすべてが失敗した場合は、いつでも変数を 0 から 2* までループして、すべての項目をpiスキップし、他のすべての項目stepを で描画することができます。stepsin(angle)*radius+centerx, cos(angle)*radius+centery

ほら、自家製の点線の円:)

Answer 3

私のJavaScript パス ライブラリは、楕円を含む任意のパス (任意の数の直線または曲線のセグメントで構成できます) の破線および点線の描画を実装しています。ダウンロードしてサンプルを確認してください。