3

我正在尝试创建一个平均分为五个部分的戒指。我的方法可能是非正统的，因为我是 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 回答