1

Здравствуйте, есть такая задача... есть элемент канваса, на этом полотне можно мышью рисовать, но как сделать например на этом полотне заранее нарисованный круг, за пределами которого порисовать не получится? т.е. человек может рисовать только в пределах этого круга

1
  • 3
    определять положение мыши, прежде чем рисовать, смотреть расстояние от центра круга, до точки в которой собрались рисовать, если больше радиуса - не рисовать.
    – zb'
    4 мар 2014 в 21:20

2 ответа 2

0

Вот ещё один вариант, через 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);            // теперь мы можем рисовать везде
0

Проще всего нарисовать этот круг-ограничитель и применить к последующим элементам перекрывание: globalCompositeOperation="source-in". Или уже после всех действий круг c противоположным перекрыванием: globalCompositeOperation="source-out"

http://jsfiddle.net/d2csU/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.