Здравствуйте, есть такая задача... есть элемент канваса, на этом полотне можно мышью рисовать, но как сделать например на этом полотне заранее нарисованный круг, за пределами которого порисовать не получится? т.е. человек может рисовать только в пределах этого круга
2 ответа
Вот ещё один вариант, через clip()
: http://jsfiddle.net/JC3E2/
ctx.save(); // сохраняем состоянеи канваса,
ctx.beginPath(); // чтобы впоследствии отменить обрезание
ctx.strokeStyle = 'red';
ctx.arc(100, 100, 100, 0, Math.PI * 2, 0); // рисуем границу области
ctx.stroke(); // (можно рисовать произвольную
ctx.clip(); // границу, не только окружность)
ctx.beginPath();
ctx.fillStyle = 'green'; // рисуем только внутри
ctx.fillRect(10, 10, 150, 150); // очерченной границы
ctx.fill();
ctx.restore(); // восстанавливаем состояние канваса
ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 200, 200); // теперь мы можем рисовать везде
Проще всего нарисовать этот круг-ограничитель и применить к последующим элементам перекрывание: globalCompositeOperation="source-in". Или уже после всех действий круг c противоположным перекрыванием: globalCompositeOperation="source-out"