Как установить пользовательскую зону отсечения для HTML5 Canvas? - PullRequest
Новая
       26

Как установить пользовательскую зону отсечения для HTML5 Canvas?

0 голосов
/ 16 августа 2011

Мне нужно нарисовать на прямоугольнике минус круг.Если обрезка окружности невозможна, для меня может быть достаточно многоугольной зоны обрезки.

Как настроить настраиваемую зону обрезки для HTML5 Canvas?

Ответы [ 3 ]

1 голос
/ 16 августа 2011

Вы должны прочитать Составление в руководстве по холсту, оно объясняет, как вы рисуете прямоугольник без круга и подобных фигур.

Я думаю, что вы ищете destination-out:

enter image description here

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillStyle = "#09f";
    ctx.fillRect(15,15,70,70);

    ctx.globalCompositeOperation = 'destination-out';

    ctx.fillStyle = "#f30";
    ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI*2,true);
    ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>

См. Это в действии на jsFiddle .

0 голосов
/ 16 августа 2011

Хорошо. Это было тяжело.

Лучшее решение, которое я нашел для рисования везде, кроме круга, это 

c.save();
c.beginPath();
c.moveTo(0, 0);
c.lineTo(x, 0);
c.arc(x, y, 75, - Math.PI / 2, Math.PI * 2 - Math.PI / 2, 1);
c.lineTo(x, 0);
c.lineTo(1000, 0);
c.lineTo(1000, 500);
c.lineTo(0, 500);
c.clip();
c.drawImage(window.tBitmap[0], x - 100, y - 100);
c.restore();

Не могу поверить, что нет лучшего решения. Но это работает для моих нужд.

0 голосов
/ 16 августа 2011

Также вы можете использовать «клип», а затем - «очистить».Примерно так: 

drawRectangle(ctx);
walkCirclePath(ctx);
ctx.clip();
ctx.clear();

Но сглаживание не работает таким образом;

...