<div class="snippet-code"> var rand = function(v) { "> <div class="snippet-code"> var rand = function(v) { "> <div class="snippet-code"> var rand = function(v) { " />

Как вы рисуете с альфа = 0 в холсте html5, чтобы «стереть»

Как вы рисуете с помощью alpha = 0 в холст HTML5? Представьте, что я делаю клонирование фотошопа, у меня слой сплошной красный. Я выбираю инструмент ластик и рисую. Он рисует в rgba (0,0,0,0) , позволяя мне просматривать фон. Как это сделать в холсте HTML5?

Вот какой код.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var rand = function(v) {
    return Math.random() * v;
};

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");

// fill the canvas with black
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Erase some circles (draw them in 0,0,0,0);
ctx.fillStyle = "rgba(0,0,0,0)";
ctx.globalCompositeOperation = "copy";
for (var ii = 0; ii < 5; ++ii) {
    ctx.beginPath();
    ctx.arc(rand(canvas.width), rand(canvas.height), 
            rand(50) + 20, 0, 360, false);
    ctx.fill();
}

/*
source-over    
source-in    
source-out    
source-atop

destination-over    
destination-in    
destination-out    
destination-atop

lighter    
darker    
copy    
xor
*/
canvas {
    margin: 10px;
    border: 1px solid black;
    background-color: yellow;
}
<div>Want red with yellow circles</div>
</div> </div>

Это не работает. Все операции с холстом считаются бесконечно большими, что означает, что каждый круг (дуга) с globalCompositeOperation , установленный для «копирования», эффективно стирает все за пределами каждого круга.

Я мог бы настроить обрезку, чтобы соответствовать кругу, но в идеале я хотел бы стереть с помощью сглаженного круга, как и кисть фотошопа.

2
nl ja de

3 ответы

Вы захотите использовать:

ctx.fillStyle = "rgba(0,0,0,1)";//(Drawing with 0 alpha pretty much means doing nothing)
ctx.globalCompositeOperation = "destination-out";

рабочий пример

Имейте в виду сохранить предыдущий globalCompositeOperation и восстановить его, иначе прозрачность не будет работать должным образом, позже.

Проблема заключается в том, что «Рисование с помощью alpha = 0 на холсте просто по умолчанию накладывает невидимый слой« чернил ».

4
добавлено
можете ли вы объяснить, как это работает? Холст в моей скрипке составляет 255,0,0,255, прежде чем нарисовать круги «стереть». rgba (0,0,0,1) = 0,0,0,255. Как альфа становится 0? Кажется, что только 255 из источника или 255 от места назначения.
добавлено автор gman, источник
Как вы относитесь к «Как альфа становится 0 ?" ? Вы имеете в виду альфу в местоположении X холста, становящегося 0 ? В этом случае это работает globalCompositeOperation . С "destination-out" он «вырезает» вычерченную фигуру из существующего холста.
добавлено автор Cerbrus, источник

Если вы должны бежать свободно, поэтому, когда мышь была нажата и перемещена, эта строка должна быть удалена, это может быть решением:

var canvas = document.getElementById("myCanvas");
var eraseWidth = 5;

$("#myCanvas").mousedown(function(canvas){          //the mousedown (writing) handler, this handler does not draw, it detects if the mouse is down (see mousemove)
    x = canvas.pageX-this.offsetLeft;
    y = canvas.pageY-this.offsetTop;
});

$("#myCanvas").mousemove(function(canvas){
    context.beginPath();
    var x2 = x-(eraseWidth/2);          //x2 is used to center the erased rectangle at the mouse point
    var y2 = y-(eraseWidth/2);          //y2 is used to center the erased rectangle at the mouse point
    context.clearRect(x2, y2, eraseWidth, eraseWidth);              //clear the rectangle at the mouse point (x2 and y2)
    context.closePath();
};

в основном то, что это делает, - это ясный прямоугольник, когда мышь перемещается, каждый раз, когда мышь-манипулятор отправляет событие mousemove и использует координаты x и y для центра холста, чтобы очистить recangle. результатом является очищенная (стертая) линия.

хорошо, вы можете видеть прямоугольники, если вы двигаетесь слишком быстро, но мой проект был концепцией, поэтому он сделал трюк для меня;)

0
добавлено

Если вы работаете над чем-то похожим на клон фотошопа, то, вероятно, лучше всего создать холст для каждого слоя. Я думаю, это значительно упростило бы все для вас, давая вам лучшую производительность взамен.

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing