Создание сложного клипа в холсте

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

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

function draw() {
    ctx.save();    

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    ctx.beginPath();

    ctx.arc(200, 200, 30, 0, Math.PI * 2, true);
    ctx.arc(200, 200, 100, 0, Math.PI * 2, true);
    ctx.clip();

    ctx.fillRect(0,0,500,400); 
}

draw();

Как вы можете видеть в моем jsfiddle, это не работает: https://jsfiddle.net/nahman/05jcjkvn/

То, что я нашел, - это изменить его, чтобы использовать два разных типа фигуры: дуга и прямоугольник, дуга и путь - он работает, но мне нужно иметь возможность использовать два из них: https://jsfiddle.net / Нахман / 9wmvLea7 /

Мои вопросы:

  1. Почему он не работает с двумя одинаковыми типами объектов, но с разными? Есть ли хорошие ресурсы, объясняющие это? Мои поисковые запросы Google оказались грустно пустыми ...

  2. Как я могу это исправить? :)

Я должен отметить, что в настоящее время я вынуждаю поведение, которое я хочу, рисуя меньший клип после моего рисунка, а затем применяя clearRect ( https://jsfiddle.net/nahman/pg6ya2ob/ ), но по целому ряду причин предпочтут понять что происходит и делать это более правильно, если это возможно.

javascript,canvas,html5-canvas,clip,

1

Ответов: 1

2 принят

Посмотрите статью о клипе и правилах наполнения

Вам нужно указать правильное правило заполнения «evenodd» для вашего дела.

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

function draw() {
                ctx.save();    
    
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    
    ctx.beginPath();
    
    ctx.arc(200, 200, 100, 0, Math.PI * 2, true);
    ctx.arc(200, 200, 30, 0, Math.PI * 2, true);
    
    ctx.clip("evenodd");
    ctx.fillRect(0,0,500,400);
}

draw();
<canvas id="canvas" width=500 height=400></canvas>

JavaScript, холст, html5 холст, клип,
Похожие вопросы
Яндекс.Метрика