Популярные вопросы по тегу CANVAS
Измените размер холста HTML с помощью .scale()
... од canvas.scale(), потому что он не сжимается ... Код: ImageRender.prototype.resizeTo = function () { var canvas = $('#myCanvas')[0]; var ctx = canvas.getContext("2d"); //current image var currImg = ctx.getImageData(0, 0, ca ...
Имеет ли смысл создавать компоненты пользовательского интерфейса на основе холста?
... создания пользовательских интерфейсов, имеет 8 ли смысл создавать набор полностью основанных 7 на холсте компонентов пользовательского 6 интер ...
Gnuplot: размер холста
... gnuplot 3 я заметил, что правая граница обрезана, ...
Как написать текст на элементе холста HTML5?
... ать текст на ...
Как лучше всего создавать ключевые события на холсте HTML5?
... 4 ключевых событий для холста HTML5. Я не 3 предпочитаю никаких библиотек, но если вы 2 думаете, что э ...
Как сделать прозрачный холст в html5?
... , потому 1 что я хочу положить два холста друг на др ...
Как редактировать пиксели и удалять белый фон в изображении холста в html5 и javascript
... включать два цикла 11 for. Я думал, что начну с первого пикселя 10 верхней строки, итерацию вправо, если это 9 белый пиксель, я сделаю его прозрачным и 8 переместу на 1 пиксель вправо, если он не 7 белый, я остановлюсь. Затем в той же строке 6 я начинаю с самого левого пикселя и проверяю, если 5 белый, я делаю его прозрачным, затем перемещаю 4 на 1 пиксель влево и т. Д. И т. Д. Затем 3 я пе ...
Нарисуйте текст внутри заполненного прямоугольника с помощью Canvas Android
... ник 7 с указанными границами и внутри этого прямоугольника 6 текст для рисования с помощью Canvas Android 5 ?? Я пробовал mPaint.setColor(Color.GREEN); canvas.drawText(mText, x, y, mPaint); mPaint.se ...
Обнаружение столкновения прямоугольника с кругом
... тоже часть моего кода: - var rx = 50; //distance from the x-axis of the Rect. var ry = 50; //distance from the y-axis of the Rect. var rw = 80; //width of the Rect var rh = 30; //Height of the Rect. // Distance to moved of the Rect. var dx = 2; var dy = 2; // Center of t ...
Как правильно рендерить холст вне экрана
... сть какая-то лучшая идея 3 для достижения этого, пожалуйста, просветите 2 меня. Спасибо, вот моя основная попытка 1 перед фактической реализацией :) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Off Screen Canvas</ti ...
Ширина и высота холста в HTML5
... у элемента 2 HTML5 canvas? Обычный способ выглядит сл ...
html5 перерисовка холста при изменении размера
... ctx.fillStyle = 'green'; ctx.beginPath(); ctx.moveTo(5, 0); ctx.lineTo(0, canvas.height); scaleStep = 24*cScale; почему-то плохо 6 работает, старые позиции остаются. Есть 5 ли способ полностью удалить весь холст и 4 добавить его или полностью перерисовать? Я 3 пробовал canvas.width=canvas.width, пробовал ctx.clearRect(0, 0, ca ...
HTML Canvas: как нарисовать перевернутое / зеркальное изображение?
... что у каждого 4 кадра разный размер. Какой метод лучше всего 3 подходит для достижения этой цели? Я безуспешно 2 пытался вызвать setScale(-1, 1); на своем холсте. Может 1 быть, это не предназначено д ...
Как изменить расположение элемента холста?
... " height="200" style="border:1px solid #c3c3c3;"> Error: Browser does not support canvas element. </canvas> <script type="text/javascript"> var main = document.getElementById("main"); var render = ma ...
Анимированный GIF на холсте HTML5
... я могу легко нарисовать (пожалуйста, не 3 слишком сложный код) анимированный GIF на 2 холсте, ...
Как я могу построить линию градиента на холсте HTML?
... аюсь нарисовать линию градиента ...
Добавление фонового изображения в Python
... ние на 2 холст в Python. Пока код выглядит так: from Tkinter import * from PIL import ImageTk,Image ... other stuffs root=Tk() canvasWidth=600 canvasHeight=400 self.ca ...
Есть ли эквивалент backface-visibility для three.js?
... phereMaterial.depthTest = false; // set up the sphere vars var radius = 50, segments = 20, rings = 20; // create a new mesh with sphere geometry - var sphere = new THREE.SceneUtils.createMultiMaterialObject( new THREE.SphereGeometry(radius, segments, rings),[ sphereMaterial, new THREE.MeshBasicMaterial({ color: 0xa7f1ff, ...
Как переключать определенные цвета изображения во Flutter
... взять 14 шестнадцатеричный цвет изображения автомобиля 13 по умолчанию (известный ранее - # bdd4de 12 в данном случае) и динамически переключить 11 его на цвет, выбранный пользователем. Что 10 касается оттенка, я могу просто повторить 9 этот процесс и просто изменить его на более 8 темную версию выбранног ...
Нарисуйте линию двумя щелчками мыши на холсте HTML5?
... лчками мыши 1 на холс ...
Как установить размер шрифта текстового элемента Canvas?
... as.create_text(x, y, font="Purisa", text= k) Как установить 2 размер шрифта с помощью ...
Как нарисовать многоугольники на холсте HTML5?
... Без использования jQuery или 1 чего-т ...
Цвет фона области диаграммы chartjs
... ckgroundColor: [ "#f38b4a", "#56d798", "#ff8397", "#6970d5" ], hoverBackgroundColor: [ "#f38b4a", "#56d798", "#f ...
MediaStream одновременно захватывает холст и звук
... -то способ 1 добиться этого: https://w3c.github.io/mediacapture-main/#introduction "Двумя основными компонентами в MediaStream API являются интерфейсы MediaStreamTrack и MediaStream. Объект MediaStreamTrack представляет мультимедийные данные одного типа, которые происходят из одного источника мультимедиа в пользовательском агенте, например видео, созданное веб-камерой. MediaStream используется для группировки нескольких объектов MediaStr ...
Как мне заполнить Rect изображением?
... s and length and width here). Есть ли синтаксис, в 2 котором я могу сказать ctx.fillRect(someImagePathHere ...
Как очистить дугу или круг на холсте HTML5?
... л, что существует метод clearRect(), но не 3 могу найти его, чтобы очистить дугу (или ...
Очистка strokeRect() на холсте HTML5
... ect(120, 30, 30, 30); $context.strokeRect(150, 0, 30, 30); $context.strokeRect(150, 30, 30, 30); // Now erase the squares (individually) $context.clearRect(120, 0, 30, 30); $context.clearRect(120, 30, 30, 30); $context.clearRect(150, 0, 30, 30); $context.c ...
Можно ли сделать изображение с градиентной прозрачностью / маскировкой слоя с помощью холста?
... е не удалось понять 6 это. Я знаю, что могу добиться этих эффектов 5 с помощью изображения PNG; однако в программе, над 4 которой я работаю, градиент будет посто ...
Как сохранить холст как изображение png?
... hiMgBKzqLHCeHqVOrILtduF4MpZExEqoVq167A3bmjap34J/bmoFqcj2dM3Pr9GK+b1p5bJXmXz9nEC+3FiorYF4hcmXlo+gUrk+um/+e+QoVWfxxRJBQBAQBAQBQUAQqBwE8uzCwiMiaEqOWYR5jJ2/6Hl58nYHk0Pr1v1Ov62cTytXfE5r1yyyc6RgDhjI16+L+tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6/eK7eJ/Ge0RS8oPc9gT1pTqN2jFocltfdPxecBU2HHxgBTky+71CjPGCO+YyU4j0TU9ZcGf0y+JSAoCgoAgIAgIAoJATUcgG2dQ0jpKZ/Xp+PlLtEcs3huGQhO/r17K3rBvuGrEUt8i5HPAkHC/Yt6lK ...
Как добавить изображение на тканевое полотно?
... ия / значки на 5 свой тканевый холст. Код, приведенный в 4 демонстрации Fabric, не работает. fabric.Image.fromURL('my_image.png', function(oImg) { canvas.add(oIm ...
Отключить действие прокрутки / смахивания для рисования холста HTML на ios
... e на холсте, чтобы отключить прокрутку 8 на устройстве во время рисования. Однако 7 это работает только для устройств без IOS. В любом браузере 6 на устройстве IOS он по-прежнему выполняет 5 прокрутку / смахивание и затрудняет правильное 4 рисование. Похоже, это функция IOS. ...
Canvas - IndexSizeError: индекс или размер отрицательны или превышают допустимое значение.
... _config.newImgHeight = 250; _config.newImgWidth = Math.round(_config.newImgHeight * _config.imgWidthRatio); } else if (scaledWidth < 250) { _config.newImgWidth = 250; _config.newImgHeight = Math.round(_config.newImgWidth * _config.imgHeightRatio); } }, ...
Как нарисовать текст на холсте?
... и нарисовать круговую 5 диаграмму. Мне еще предстоит добавить легенды 4 для пирога, где мне нужно разместить т ...
Получите SVG из элемента холста и сохраните его
... рафиков. Пока 15 все работает нормально с графиком Force 14 Directed. Узлы графиков можно перемещать 13 для стилизации макета. Я не могу осмыслить 12 следующее: »как извлечь данные с холста и сохранить их в файл SVG«. Что я пробовал: Я уже пытался получить доступ 11 к данным изображения из консоли с помощью var app.canvas = doc ...
Как извлечь информацию о пикселях из PNG с помощью javascript (альтернативы getImageData)
... дходом заключается в том, что браузеры 3 изменяют значения пикселей под влиянием 2 альфа, как обсуждалось here и here. Этот вопро ...
Данные из разных источников на холсте HTML5
... anvas.drawImage(img, 0, 0); originalImageData = canvas.getImageData(0,0,width, height)); //chrome fails } img.src = 'picture.jpeg'; Это отлично работает как в Safari, так 7 и в Firefox, но не работает в Chrome со 6 следующим сообщением: Невозможно получить 5 данные изображения с холста, потому что 4 холст испорчен дан ...
Как сделать элемент холста в HTML кликабельным?
... на которой 9 есть множество математических фигур, например 8 ромб, квадрат, прямоугольник, треугольник 7 и т. д. Я пытаюсь достичь того, что ...
Загрузка изображения холста с помощью toBlob
... _button").onclick = function() { var link = document.createElement("a"); link.download = "image.png"; canvas.toBlob(function(blob){ link.href = URL.createObjectURL(blob); console.log(blob); },'image/png'); console.log(link.href); link.click(); } console.log(blob) в 5 функции обратного вызова возвращает: Blob {size: 64452, type: "image/png"} Но ...
Перетаскивание нескольких объектов на холсте HTML5
... IGHT); ctx.fillStyle = "#444444"; rect(x - 15, y - 15, 30, 30); ctx.fillStyle = "#ff550d"; rect(x - 25, y - 25, 30, 30); ctx.fillStyle = "#800080"; rect(x - 35, y - 35, 30, 30); ctx.fillStyle = "#0c64e8"; rect(x - 45, y - 45, 30, 30); } Кажется, я 3 не понимаю, какие изменения мне нужно внести 2 в функции MyMove(), MyUp() и MyDown(), чтобы 1 объекты двигались независимо друг от друга. ...
Самый высокий символ Юникода?
... код символа Юникода у этого символа 2 f? ...
Как получить координаты щелчка мыши на элементе холста?
... ям x и y (относительно 3 элемента холста)? Совместимость с устаревшими 2 браузерами не требуется, подойдут Safari, Opera 1 ...
Как отрендерить каплю на элементе холста?
... nvas = document.getElementById('canvas'); var input = document.getElementById('input'); var ctx = canvas.getContext('2d'); var photo; function picToBlob() { var file = input.files[0]; canvas.toBlob(function(blob) { var newImg = document.createElement("img"), url = URL.createObjectURL(blob); newImg.onload = function() { ctx.drawImage(this, 0, 0); photo = blob; URL.revokeObjectUR ...
Обнаружение событий левой и правой мыши для игры на холсте
... сколько я понял, это работает 1 только для кнопок. Вот код. canvas.addEventListener('mouseup', function(evt) { let x1 = Math.floor(evt.offsetX/(canvas.height/rows)); let y1 = Math.floor(evt.offsetY/(canvas.width/cols)); draw (y1, x1); //this is my drawing functions (draws the numbers, bombs) }, false); canvas.addEventListener('contextmenu', function(evt) { let j = Math.floor(evt.offsetX/(canvas.height/rows)); let i = M ...
Как сделать область рисования холста прозрачной в Android?
... ArrayList<Element>(); public Panel(Context context, AttributeSet attrs) { super(context, attrs); getHolder().addCallback(this); mThread = new ViewThread(this); } public void doDraw(Canvas canvas) { canvas.drawColor(Color.TRANSPARENT); synchronized (mElements) { for (Element element : mElements) { element.doDraw(canvas); ...
Как анимировать путь на холсте - android
... мещаю свой код внутри метода 2 onDraw, чтобы указать, что именно я хочу. paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(2); paint.setColor(Color.BLACK); Path path = new Path(); path.moveTo(10, 50); // THIS TRANSFORMATIONS TO BE ANIMATED!!!!!!!! path.lineTo(40, 50); path.moveTo(40, 50); path.lineTo(50, 40); // and so on... canvas.drawPath(path, paint); ...
Как использовать холст HTML5 в качестве текстуры WebGL
... хочу: Установите единые значения для случая i. Визуализировать вычислительный шейдер для случая i в тег HTML5 <canvas>. Используйте содержимое <canvas> (если я визуализирую выходные данные) в качестве текстуры на следующем этапе визуализации. Повторите для всех случаев. Извлекайте ответы в JS из данных о цвете. Я пытаюсь создать вычислительный 5 шейдер, и мне нужно переносить значение 4 на пиксель (фрагмент) на ка ...
HTML5 - изменение непрозрачности рисованного прямоугольника
... нарисовал элемент прямоугольника 2 HTML5, используя это: context.clearRect(25, 72, ...
Сетка, нарисованная с использованием элемента <canvas>, выглядит растянутой
... ичине 5 сетка выглядит растянутой, линии толще 1 4 пикселя, а расстояние между ними совершенно 3 неправильное. Он даже не начинается с позиции 2 (10,10) .. Было бы здорово, если бы кто-нибудь взглянул 1 и сказал мне, ...
Политика безопасности содержимого: данные img-src 'self':
... контента: "img-src 'self' data:". Это мой 4 метатег: <meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *"> Я использую html2Canvas в приложении, и 3 когда я удаляю это: ...
Как нарисовать плавную непрерывную линию с помощью мыши, используя холст HTML и javascript
... 1 JS: var canvas, ctx var mouseX, mouseY, mouseDown = 0 function draw(ctx,x,y,size) { ctx.fillStyle = "#000000" ctx.beginPath() ctx.arc(x, y, size, 0, Math.PI*2, true) ctx.closePath() ctx.fill() } function clearCanvas(canvas,ctx) { ctx.clearRect(0, 0 ...
