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

Мне интересно, как бы вы поступили и создали фигуру, подобную этой ниже, в 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();

Теперь обрезать козявку, я в недоумении. Может ли кто-нибудь протянуть мне руку? Спасибо!


canvas html crop geometry shape
person Ryan    schedule 14.09.2010    source источник

Ответы (1)


arrow_upward
4
arrow_downward 

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()
person MooGoo    schedule 14.09.2010