3

5つの部分に均等に分割されるリングを作成しようとしています。私はJS/JQueryを初めて使用するため、私のメソッドは非正統的かもしれません。以下は私が持っているコードです：

var c=document.getElementById("c");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.arc(430,430,300,0,2*Math.PI,true);//x-y-r-angle-PI-rotation(clockwise vs anti//
ctx.closePath();
ctx.strokeStyle="#000";
ctx.stroke();

ctx.save();
ctx.beginPath();
ctx.arc(430,430,200,0,2*Math.PI);
ctx.closePath();
ctx.strokeStyle="#000";
ctx.stroke();
ctx.clip();


var drawAngledLine = function(x, y, length, angle) {
    var radians = angle / 180 * Math.PI;
    var endX = x + length * Math.cos(radians);
    var endY = y - length * Math.sin(radians);

    ctx.beginPath();
    ctx.moveTo(x, y)
    ctx.lineTo(endX, endY);
    ctx.closePath();
    ctx.stroke();
}
ctx.strokeStyle = "#000";
ctx.lineWidth = "1";

drawAngledLine(430, 430, 300, -90);
drawAngledLine(430, 430, 300, -162);
drawAngledLine(430, 430, 300, -234);
drawAngledLine(430, 430, 300, -306);
drawAngledLine(430, 430, 300, -18);

ctx.restore();
ctx.beginPath();
ctx.arc(430,430,200,0,2*Math.PI,true);
ctx.strokeStyle="#000";
ctx.stroke();

ctx.clip（）;を使おうとしました。ただし、線の内側をクリップし、内側をマスクして、内側の円と外側の円の間の接続線のみを表示するようにします。画像なしで説明するのは難しいです...

誰か助けてください。よろしくお願いします。

4

1 に答える 1

4

あなたはそれをいくつかの方法で行うことができます。最初にスライスで円を描き、次にその上に背景と同じ色の円を描きます。これにより、完全な円ではなくリングのように見えます。他の方法は上記と同じですが、キャンバスdestination-outの実際の穴のあるキャンバスのグローバル構成を変更して、円のその部分を削除する点が異なります。

ライブデモ

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

    canvas.width = canvas.height = 256;

    function toRadians(deg) {
        return deg * Math.PI / 180
    }


    slicedRing(128,128,5,50,20);

    function slicedRing(x,y,sect,r,w){
        var slice = 360/sect;

        ctx.fillStyle = "rgb(255,0,0)";
        ctx.strokeStyle = "#fff";

        for(var i = 0; i < sect; i++){
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.arc(x,y,50,toRadians(slice*i),toRadians((slice*i)+slice));
            ctx.fill();
            ctx.lineTo(x,y);
            ctx.stroke();
            ctx.closePath();
        }

        // either change this to the background color, or use the global composition
        ctx.globalCompositeOperation = "destination-out";
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.arc(x,y,w,0,Math.PI*2);
        ctx.fill();
        ctx.closePath();

        // if using the global composition method, make sure to change it back to default.
        ctx.globalCompositeOperation = "source-over";
    }
于 2012-12-11T17:12:02.387 に答える