Вопросы с тегом «html5-canvas»

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

1013 javascript  html  canvas  html5-canvas  composite 

Каков наилучший подход для создания элементов на лету и возможности их перемещения? Например, допустим, я хочу создать прямоугольник, круг и многоугольник, а затем выбрать эти объекты и переместить их. Я понимаю, что HTML5 предоставляет три элемента, которые могут сделать это возможным: svg , canvas и div . Для чего я …

476 javascript  html  svg  html5-canvas 

Как я могу автоматически масштабировать <canvas>элемент HTML5, чтобы он соответствовал странице? Например, я могу получить <div>в масштабе, установив heightи widthсвойства на 100%, но <canvas>не будет масштабироваться, будет ли он?

400 javascript  html  html5-canvas 

Я работаю над генеративным художественным проектом, в котором я хотел бы позволить пользователям сохранять полученные изображения из алгоритма. Общая идея такова: Создайте изображение на холсте HTML5, используя генеративный алгоритм Когда изображение будет готово, разрешите пользователям сохранять холст как файл изображения на сервере. Разрешить пользователю либо загрузить изображение, либо добавить его …

261 javascript  php  ajax  html5-canvas 

Я хочу иметь веб-страницу с одним центрированным словом. Я хочу, чтобы это слово было нарисовано с помощью анимации, чтобы страница «записывала» слово так же, как и мы, то есть оно начинается в одной точке и рисует линии и кривые с течением времени, так что конечным результатом является глиф. Мне все …

229 javascript  css  canvas  html5-canvas  css-shapes 

Я использую инструмент Canvas2Image от Nihilogic для преобразования рисунков холста в изображения PNG. Теперь мне нужно превратить те строки base64, которые генерирует этот инструмент, в настоящие файлы PNG на сервере с использованием PHP. Короче говоря, сейчас я создаю файл на стороне клиента с помощью Canvas2Image, затем извлекаю данные в кодировке …

212 php  javascript  base64  html5-canvas 

Я хочу сохранить свой холст в img. У меня есть эта функция: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } Это дает мне ошибку: Uncaught SecurityError: Не удалось выполнить 'toDataURL' для 'HTMLCanvasElement': испорченные полотна не могут быть экспортированы. Что я …

187 javascript  html5-canvas 

Фотографии с цифровых камер часто сохраняются в формате JPEG с тегом «ориентации» EXIF. Для правильного отображения изображения необходимо поворачивать / отражать в зависимости от установленной ориентации, но браузеры игнорируют эту информацию, отображающую изображение. Даже в крупных коммерческих веб-приложениях поддержка ориентации EXIF ​​может быть неочевидной 1 . Тот же источник также …

154 javascript  rotation  html5-canvas  exif 

Я использую html5 элементы холста, чтобы изменить размеры изображений в моем браузере. Оказывается, качество очень низкое. Я нашел это: Отключить интерполяцию при масштабировании <canvas>, но это не помогает повысить качество. Ниже мой код CSS и JS, а также изображение, масштабированное с помощью Photoshop и масштабированное в Canvas API. Что мне …

149 javascript  css  html  canvas  html5-canvas 

Для приложения для рисования я сохраняю координаты движения мыши в массив, а затем рисую их с помощью lineTo. Получившаяся линия не гладкая. Как я могу построить единую кривую между всеми собранными точками? Я погуглил, но нашел только 3 функции для рисования линий: Для 2 точек выборки просто используйте lineTo. Для …

133 javascript  canvas  html5-canvas  bezier  spline 

Мой код очень хорошо работает на моем локальном хосте, но не работает на сайте. Я получил эту ошибку из консоли для этой строки .getImageData(x,y,1,1).data: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. часть моего кода: jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || (this.pageX …

131 javascript  html  html5-canvas 

Я хочу повернуть фотографии на основе их исходного поворота, установленного камерой в данных изображения JPEG EXIF. Хитрость в том, что все это должно происходить в браузере с использованием JavaScript и <canvas>. Как JavaScript может получить доступ к JPEG, локальному объекту файлового API, локальному <img>или удаленному <img>, к данным EXIF ​​для …

125 javascript  jpeg  exif  html5-canvas 

Я пытался изменить цвет фона моего холста по умолчанию с черного на прозрачный / любой другой цвет, но безуспешно. Мой HTML: <canvas id="canvasColor"> Мой CSS: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> Как вы можете видеть в следующем онлайн-примере, у меня есть некоторая анимация, добавленная к …

123 css  html  canvas  html5-canvas  three.js 

Есть ли какая-либо причина, кроме производительности, для использования WebGL вместо 2D-Canvas для 2D- игр / приложений? Другими словами, какие 2D-функции предлагает WebGL, чего невозможно легко достичь с помощью 2D-Canvas?

114 html  html5-canvas  webgl 

Я пытаюсь сложить два холста вместе и сделать их двухслойным холстом. Я видел здесь пример: <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> Но я бы хотел, чтобы оба холста …

104 css  html5-canvas