Можно ли сделать градиентно-прозрачное / маскирующее изображение слоя, используя холст?

Если вы посмотрите на него в каждом конкретном случае, возможно, некоторые реализации приемлемы.

String.prototype.slice = function slice( me ){
  return me;
}; // Definite risk.

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

String.prototype.capitalize = function capitalize(){
  return this.charAt(0).toUpperCase() + this.slice(1);
}; // A little less risk.

В этом случае мы не перезаписываем какой-либо известный JS-метод ядра, но мы продолжаем String. Один из аргументов в этом сообщении упоминал, как новый разработчик знает, является ли этот метод частью ядра JS или где найти документы? Что произойдет, если основной объект JS String должен получить метод с именем capitalize?

Что делать, если вместо добавления имен, которые могут столкнуться с другими библиотеками, вы использовали модификатор компании / приложения, который все разработчики могли понимаете?

String.prototype.weCapitalize = function weCapitalize(){
  return this.charAt(0).toUpperCase() + this.slice(1);
}; // marginal risk.

var myString = "hello to you.";
myString.weCapitalize();
// => Hello to you.

Если вы продолжаете распространять другие объекты, все разработчики столкнутся с ними в дикой природе (в данном случае) мы, которые уведомили бы их, что это расширение для компании / приложения.

Это не устраняет коллизий имен, но уменьшает возможность. Если вы определите, что расширение основных объектов JS для вас и / или вашей команды, возможно, это для вас.

13
задан Willy 24 September 2015 в 21:12
поделиться

2 ответа

Я добавил здесь код http://code.google.com/p/canvasimagegradient/ , который добавляет функцию drawImageGradient в CanvasRenderingContext2D. Вы можете нарисовать изображение с линейным или радиальным градиентом. Он не работает в IE даже с excanvas из-за отсутствия поддержки getImageData / putImageData.

Следующий код, например, будет рисовать изображение с радиальным градиентом (извлечение контекста и загрузка изображения не показаны):

var radGrad = ctx.createRadialGradient(
    img.width / 2, img.height / 2, 10, 
    img.width / 2, img.height / 2, img.width/2);
radGrad.addColorStop(0, "transparent");
radGrad.addColorStop(1, "#000");

ctx.drawImageGradient(img, 112.5, 130, radGrad);

Код работает следующим образом:

  1. Динамически создавать элемент холста и рисовать на нем изображение.
  2. Получить imageData для этого нового холста.
  3. Получить imageData для того места на холсте, на котором вы хотите нарисовать изображение.
  4. Перебирать целевые данные imageData и обновлять каждый пиксель, складывая процент (полученный из значения прозрачности градиента) изображения и значений целевого пикселя.
  5. Наконец, поместите обновленные данные изображения обратно на холст назначения.

Очевидно, что производительность становится проблемой, поскольку изображения становятся больше. Изображение на http://code.google.com/p/canvasimagegradient/ рисуется примерно за 6-10 мсек. Изображение 1024x768 занимает от 100 до 250 мсек. Тем не менее, можно использовать до тех пор, пока вы не анимируете.

7
ответ дан 1 December 2019 в 19:39
поделиться

Если вам нужно сделать изображение прозрачным, установите ctx.globalAlpha в то значение, которое вам нужно (по умолчанию 1, без прозрачности). Затем сбросьте это значение после того, как нарисуете изображение. Возможно, поможет и этот URL https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing.

0
ответ дан 1 December 2019 в 19:39
поделиться
Другие вопросы по тегам:

Похожие вопросы: