slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 1567
Теги: canvas, eraser, ластик, globalCompositeOperation

Рассмотрим возможность использования ластика на холсте Canvas.

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

Шаг 1.

Необходимо изменить один из параметров context`а, а именно globalCompositeOperation, который отвечает за то, как должны вести себя фигуры, если они перекрывают друг друга.

По умолчанию значение стоит source-over, означающее, что новое изображение рисуется поверх старого:

source over

Нам же нужно, сделать так, чтобы рисуемая поверх фигура убирала с холста то, что под ней, для этого нужно установить значение destination-out:

destination out

Шаг 2.

После чего нужно просто определить цвет - по сути им может быть абсолютно любой, но мы не проверяли. И конечно его значение составляющей alpha (прозрачность) должна быть равна 1. Теперь можно рисовать любые фигуры на холсте, и они будут стирать те, которые уже нарисованы.

После всего этого, необходимо не забыть вернуть значение параметра контекста globalCompositeOperation в значение по умолчанию, иначе рисовать новые объекты и фигуры вы не сможете.


Рассмотрим пример, создадим холст с зеленым цветом фона (чтобы проверить, что ластик действительно стирает, а не закрашивает), нарисуем на нем прямоугольник произвольного цвета и сотрём его часть окружностью. Цвет фона будем задавать CSS стилем для нашего холста.

Рассматривать создание холста мы тут не будем, вы можете прочитать об этом в специальной статье - Создание холста canvas и получение контекста на него.

function Draw() {
	var canvas = document.getElementById("id_canvas");
	var context = canvas.getContext("2d");	// Получаем так называемый контекст холста, к которому уже можем применять функции отрисовки.
	
	context.fillStyle="#0000FF"; // произвольный цвет
	context.fillRect(50, 25, 150, 100); // рисуем прямоугольник
	
	context.globalCompositeOperation = 'destination-out'; // изменяем параметр, чтобы стиралось
	context.fillStyle="rgba(255,255,255,1)"; // зададим белый цвет, чтобы проверить, что не закрашивается
	context.beginPath();  
	context.arc(120, 80, 70, 0, Math.PI*2, false);  
	context.closePath();  
	context.fill();  
	
	context.globalCompositeOperation = "source-over"; // возвращаем по-умолчанию
}

Ссылка на демо-пример:

demo

Как видно на демо, часть прямоугольника действительно стерлась, а не закрасилась белым цветом. Значит наш ластик работает! =)

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    6.40
  • intuit89
    6.00
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Тег canvas - как начать рисовать?

В этой статье мы изучим базовые возможности тега <canvas>, чтобы у вас сложилось впечатление, что это вообще такое и как это можно использовать.

Теги:

javascript, html5, canvas, гайд, основы

Комментариев: 0 Подробнее
Тег canvas - рисуем линии moveTo и lineTo.

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

Теги:

html5, canvas, lineTo, moveTo, рисуем

Комментариев: 0 Подробнее
Тег canvas - рисуем прямоугольники (rectangles)

В этой статье мы познакомимся с внутренними функциями, позволяющими рисовать прямоугольники в canvas.

Теги:

canvas, clearRect, strokeRect, fillRect

Комментариев: 0 Подробнее
Canvas - рисуем текст (draw text).

Разберемся со способами рисования текста на холсте canvas.

Теги:

font, canvas, fillText, strokeText, textAlign, textaseline

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
Домен — это неотъемлемая часть бизнеса, которая также влияет на поисковую систему. Признаки доменно...
Перейти в тему
ZOMRO аватар
На что ориентироваться при выборе хостинга? Функционал и количество ресурсов. Выбираем те параметр...
Перейти в тему
ZOMRO аватар
Красивое имя для сайта или регистрация доменных имен. Заказав у нас услугу хостинга или VDS/VPS, Вы ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.