Как сделать эту фигуру на холсте HTML5? - PullRequest
Новая
       29

Как сделать эту фигуру на холсте HTML5?

2 голосов
/ 14 сентября 2010

Интересно, как бы вы пошли и создали форму, подобную приведенной ниже в HTML5 Canvas? Я полагаю, что это более или менее обрезанный круг, хотя моя потребность изменила бы его синхронизацию.

http://img826.imageshack.us/img826/5198/98359410.jpg

context.fillStyle = "#000";
context.beginPath();
context.arc(200,200,100,0,Math.PI*2,true);
context.closePath();
context.fill();

Теперь, чтобы обрезать бугер, я озадачен. Кто-нибудь может мне помочь? Спасибо!

1 Ответ

4 голосов
/ 14 сентября 2010 
context.globalCompositeOperation = 'destination-in';

context.fillRect(200, 220, 200, 100); //Or something similar

destination-in означает, на MDC : Существующее содержимое холста сохраняется там, где пересекаются как новая форма, так и существующее содержимое холста. Все остальное сделано прозрачным.

или разговорчиво 

context.fillRect(200, 220, 200, 100);

context.globalCompositeOperation = 'source-in';

//Draw arc...

source-in означает: Новая фигура рисуется только там, где перекрываются как новая фигура, так и конечный холст. Все остальное сделано прозрачным

Оба эти метода приведут к нарушению другого содержимого, уже отрисованного на холст. Если это проблема, используйте clip

context.save();
context.beginPath();

//Draw rectangular path
context.moveTo(200, 220);
context.lineTo(400, 220);
context.lineTo(400, 320);
context.lineTo(200, 320);
context.lineTo(200, 220);

//Use current path as clipping region
context.clip();

//Draw arc...

//Restore original clipping region, likely the full canvas area
context.restore()
...