Question

我正在尝试创建一个分为五个部分的环。我的方法可能是非正统的，因为我是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（）; 但是它会剪切线条的内部，我希望它能够掩盖内部，并且只显示内部圆圈和外部圆圈之间的连接线。没有图像就很难解释......

请有人帮忙。提前干杯。

Answer 1

你可以通过几种方式做到这一点。首先，您使用切片绘制圆形，然后在其上方绘制一个与背景颜色相同的圆圈，使其看起来像一个圆环而不是一个完整的圆形。另一种方法与上面相同，不同之处在于您将画布全局合成更改为destination-out，这是画布中的实际洞，删除了圆圈的那一部分。

<强> Live Demo

    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";
    }

如何在画布中剪辑一个环？

1 个答案: