Популярные вопросы по тегу CANVAS

Используйте <canvas> в качестве фона CSS

... у ли я использовать элем ...

HTML5-холст рисовать изображение со встроенной рамкой

... rawImage(...); Как добавить к этому изображению ...

HTML5 Canvas меняет цвета всех строк

... одной 10 точки к другой. У меня также есть два поля 9 ввода текста, где вы можете изменить толщину 8 и цвет линии. Проблема в том, что когда 7 я меняю цвет линии, меняются все ранее нарисованные 6 линии. Это также происходит при изменении 5 толщины линии, но только если я рисую более 4 ...

Преобразование base64 в blob в javascript

... едующей функции b64toBlob. b64toBlob = function(b64, onsuccess, onerror) { var img = new Image(); img.onerror = onerror; img.onload = function onload() { var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; ...

Нарисуйте текст на холсте с помощью fabric.js

... овать текст на холсте. Как это 3 сделать? Холст уже содержит как ...

Скрыть элемент <canvas>

... тем 4 исчезает. Это код, который вводится .. &lt;canvas style="position: absolute; bottom: 15px; top: auto; left: 15px; z-index: 100000; visibility: visible; cursor: pointer;" y ...

Повторение фонового изображения холста HTML5

... questAnimFrame(aniloop); drawWave(); } function drawWave() { var step = 10; var scale = 60; // clear context.drawImage(backgroundImage, 0, 0); // left wave context.beginPath(); context.moveTo(0, 256); for ( var i = 0; i &lt; 256; i++) { context.l ...

Как преобразовать элемент HTML в элемент холста?

... невероятно полезно иметь возможность 6 временно преобразовать обычный элемент в 5 canvas. Например, у меня есть стилизо ...

Невозможно прочитать свойство getContext, равное null, с помощью холста

... ти холст? Что мне делать? ./index.html: &lt;canvas id="canvas" width="640" height="480"&gt;&lt;/canvas&gt; ./javascript/game.js: var Grid = function(width, height) { ... this.draw = function() { var canvas = document.getElementById("canvas"); if(canvas.getContext) { var context = canvas.getContext("2d"); for(var i = 0; ...

Нарисуйте искаженное изображение на холсте html5

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

Как очистить текст из элемента <canvas>?

... он накладывается на предыдущий 5 текст. Как очистить существующий текст на 4 холсте перед добавлением нового текста? Я 3 попытался сбросить холст, назн ...

Могу ли я поместить кнопку HTML внутри холста?

... Я хочу сделать кнопки для игры, которую 3 я создаю, как настоящие кнопки HTML ...

Выровнять текст по центру (пропорциональный шрифт) на холсте HTML5

... иметь возможность центрировать 14 отдельные строки текста в прямоугольных 13 областях, которые я могу вычислить. Единственное, что 12 я ожидал сделать в 2D-геометрии на холсте, - это 11 центрировать что-то, ширина которого вам 10 неизвестна. Я слышал обходной путь, что вы 9 можете создать ...

Как визуализировать звуковую волну на холсте HTML5?

... те холста. Мне 3 было интересно, есть ли какие-нибудь библиотеки, которые 2 упростят это? Я ищу результат в следующих 1 строка ...

Масштаб изображения по центру позиции мыши

... б 9 в одной позиции (3-5 раз с помощью колесика 8 мыши), затем переместите мышь в новое положение 7 и увеличьте масштаб. Результат: работает 6 нормально для первой точки, но после перехода 5 к другой точке и масштабирования положение 4 изображения неверное. Мой код находится в 3 этой скрипке: ...

Аппаратное ускорение WebGL VS Canvas 2D

... бражений на 30 холсте. Таким образом, для каждого маленького 29 изображения мне нужно нарисовать прямоугольник. Размер 28 прямоугольника такой же, как у этого маленького 27 изображения. К тому же прямоугольник находится 26 на нужном месте холста. Затем я использую 25 изображение как текстуру, чтобы заполнить 24 его. Затем я сравниваю производительность 23 этих двух методов. Их частота кадров ...

Как определить тип выбранного объекта?

... 4 разные панели редактирования для всех трех. Когда 3 пользователь выбирает текст, я хочу показать 2 текстовую панель. как и мудрый ...

Canvas и HTML5: поддерживаемые браузеры?

... использовать элемент HTML5 Canvas 10 для моего будущего проекта. Я хочу знать, что 9 все основные браузеры (включая версии !, потому 8 что я знаю, что последние сборки поддерживают 7 холст) поддержи ...

Изменение размера изображения на холсте HTML5

... shop: Холст: Изображение 9 с рендерингом изображения: optimizeQuality 8 установлено и масштабируется по ширине / высоте: Изображение 7 с рендерингом изображения: optimizeQuality 6 устанавливается и масштабируется с помощью 5 -moz-transform: Изменение размера холста 4 в pixastic: Полагаю, это означает, что Firefox 3 не использует бикубическую выборку, как 2 предполагалось. Мне просто нужно подождать, пока 1 они его д ...

HTML5 Canvas перемещает объект в позицию щелчка мышью

... а нажата мышь (255x, 34y). В настоящее 5 время я использую метод, но он идет от ++ X, затем 4 ++ Y к координатам; вверх ...

Установите фоновую заливку, обводку и непрозрачность холста HTML5

... hdc.fillStyle = "#9ea7b8"; hdc.opacity = 0.2; hdc.fill(); } // And call the drawPoly function with coordinates. function drawPoly(coOrdStr) { var canvas = byId('myCanvas'); hdc.clearRect(0, 0, canvas.width, canvas.height); var mCoords = coOrdStr.split(','); var i, n; n = mCoords.length; hdc.beginPath(); h ...

Как пикселизировать изображение с помощью холста и javascript

... жна помощь, чтобы добраться до конца. Я 13 ищу пикселизацию изображения на mouseover, а затем 12 перефокусировку / снятие пикселов на mouseout. Вы 11 можете увидеть хороший пример эффекта в 10 http://www.cropp.com/, когда наводите указатель мыши на блоки, расположенные 9 ниже основной карусели. Вот link to a fiddle, который я начал. Скрипка 8 не ...

Как использовать холст HTML5 в качестве текстуры WebGL

... anvas&gt; (если я визуализирую выходные данные) в качестве текстуры на следующем этапе визуализации. Повторите для всех случаев. Извлекайте ответы в JS из данных о цвете. Я пытаюсь создать вычислительный 5 шейдер, и мне нужно переносить значение 4 на пиксель (фрагмент) на каждом ...

Как использовать PaperJs с React?

... спользовать PaperJs в одном из 3 моих компонентов React. Я не уверен, г ...

Вставка пончика в процентах charts.js

... центах) - Мои js jQuery(document).ready(function(){ var data = [ { value: 5, color:"#A1638C", highlight: "#BF7AAF", label: "Días Completados 1/21" }, { ...

Использование HTML5 / Canvas / JavaScript для создания снимков экрана в браузере

... ообщить об ошибке» или «Инструмент 7 обратной связи» позволяет выбрать область 6 окна браузера, чтобы создать снимок экрана, который 5 будет отправлен вместе с вашим отзывом об 4 ошибке. Скриншот Джейсона См ...

Рисование треугольника на холсте

... vas.getContext('2d'); var sWidth = screen.width; var sHeight = screen.height; var path=new Path2D(); path.moveTo((sWidth/2)+50,sHeight/2); path.lineTo((sWidth/2),(sHeight/2)-50); path.lineTo((sWidth/2)-50,sHeight/2); ctx.fill(path); } } &lt;/script&gt; &lt;/head&gt; &lt;body onload=&quot;draw ...

Холст HTML5: масштабирование

... ь и уменьшать 6 масштаб холста (JavaScript)? Обычно у меня 5 есть холст размером 400x400 пикселей, и 4 я хотел бы иметь возможность увеличивать 3 масштаб с ...

Как отрендерить каплю на элементе холста?

... 1 итоге, визуализации капли на холсте. in this codepen, it just returns the default black image. var canvas = 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(&quot;img&quot;), url = ...

Масштабирование объектов canvas fabric.js

... це есть холст fabric.js, и 5 я бы хотел, чтобы он отвечал требованиям. Мой 4 код работает для масштабирования самого 3 холста, но не объектов, которые я нарисовал 2 на нем. Любая идея? Я искал SO, но не нашел 1 подходящего для меня решения. var resizeCanvas; resizeCanvas = function() { var height, ratio, width; ratio = 800 / 1177; width = t ...

Обновить прямоугольник холста HTML5 при наведении курсора?

... есть код, который рисует прямоугольник 6 на холсте, но я хочу, чтобы этот прямоугольник 5 менял цвет, когда я наводил на него указатель 4 мыши. Проблема в том, что после того, как 3 я нарисовал прямоугольник, я не знаю, как 2 в ...

Загрузка элемента Canvas в изображение

... ранить объект 4 холста? В своем исследовании я нашел два 3 подхода: var data = canvas.toDataURL(); var prev = window.location.href; window.location.href = data.repla ...

HTML5 Canvas Rotate Image

... ; element.drawImage(image, 0, 0, 300, 300); }); jsfiddle.net/braziel/nWyDE/ У меня проблема с поворотом изображения 9 на 90 ° вправо или влево. Я использую изображение 8 на холсте, на том же экране будет несколько 7 холстов, равных таковому в примере, но я 6 оставил его как можно ближе к проекту. Я 5 спрашиваю, как мне повернуть изображение 4 на 90 ° влево или вправо, когда я нажимаю 3 «Повернуть влево» и «Повернуть вправо»? Я 2 ...

Динамическое изменение размера сцены pixi и ее содержимого при изменении размера окна и загрузке окна

... уместиться 5 в окне. var w; var h; window.onload = function() { var w = window.innerWidth; var h = window.innerHeight; //this part resizes the canvas but keeps ratio the same renderer.view.style.width = w + &quot;px&quot;; renderer.view.style.height = h + ...

HTML5 Canvas: как ограничить fillRect?

... (с белым цветом 7 заливки) и border (черный). Я не хочу использовать 6 strokeRect(), если не смогу заполнить его позже. Я делаю 5 игру, в которой вы нажимаете на квадраты, и 4 они меняют цвет (это сложнее, но это то, на 3 чем мы фокусируемся). &lt;canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"&gt;&lt;/canvas&gt; &lt;script&gt; var c=do ...

Динамически изменять размер окна холста с помощью javascript / jquery?

... ощью javascript 4 / jquery? Изменение размера с помощью функции 3 css и ее применение к элементу холста просто 2 растягивает содержимое, как если бы ...

Как изменить цвет изображения на холсте HTML5 без изменения его шаблона

... var canvas = document.getElementById('canvas01'); var context = canvas.getContext('2d'); context.drawImage(imageObj, x, y, width, height); } var image = new Image(); image.onload = function(){ drawImage(this, 400, 100, ...

Есть ли эквивалент метода toDataURL холста для SVG?

... data = ctx.getImageData(0,0,img.width, img.height).data //also SECURITY_ERR: DOM Exception 18 } img.src = &quot;image.svg&quot; //that is an svg file. (same domain as html file :)) Но у меня возникают ошибки безопасности. По-другому? Вот 2 живая демонстрация проблемы http://c ...

Холст заполнения Chart.js

... ot;#558aeb&quot;, backgroundColor: &quot;#558aeb&quot; }] }, options: { responsive: true, legend: { display: false }, tooltips: { mode: 'label' }, hover: { mode: 'dataset' }, scales: { xAxes: [{ display: false }], yAxe ...

html5 - элемент холста - несколько слоев

... в одном элементе 3 холста без какой-либо библиотеки расширений? Значит, если 2 я сделаю clearRect на ...

Инструмент ластика HTML5 Canvas без перерисовки белого цвета

... ); $unencodedData = base64_decode($filteredData); $fileName = &quot;photo.png&quot;; $fp = fopen(ROOT_FS . SAVE_DRAW_PATH . $fileName, 'wb'); fwrite($fp, $unencodedData); fclose($fp); ?&gt; Откройте с помощью средства просмотра 3 фотографий Windows и посмотрите следующий 2 результат: дополнительная фотография для 1 загрузки: $(&quot;#upload_foto&quot;).click(function() { var data = canvas.toDataURL('image/png') ...

Android как повернуть прямоугольник холста

... оугольник определенного размера, и 6 теперь хочу повернуть его на 45 градусов, я 5 использовал canvas.rotate, matrix, но не 4 работал. как правильно повернуть холст в 3 Android? и мне интересно узнать о Path.Direction.CW, он 2 используется для вращения? но я не вижу 1 никакой функции поворота в Path() pain ...

Что именно делают beginPath() и closePath()?

... context.closePath(). Приведенный ниже код 9 будет рисовать круг по дуге вокруг экрана 8 до тех пор, пока он не исчезнет, ​​за которым 7 следует небольшая точка, которую я бы закомментировал, потому 6 что это .jpg, который я не знаю, как включить. У 5 меня вопрос: что именно делает beginPath() и 4 closePath()? Если я закомментирую их, я получу 3 неожиданный результат, отличный от ожидаемого. Я ...

canvas.toDataURL() SecurityError

... ,New+York,NY&amp;zoom=13&amp;size=600x300&amp;maptype=roadmap &amp;markers=color:blue%7Clabel:S%7C40.702147,-74.015794&amp;markers=color:green%7Clabel:G%7C40.711614,-74.012318 &amp;markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&amp;sensor=false&quot;&gt; Мне нужно его сохранить. Я нашел 12 это: function getBase64FromImageUrl(URL) { var img = new Image(); img.src = URL; img.onload = function() { var can ...

Рисование на холсте HTML5 с помощью мыши

... (например, нарисовать подпись, нарисовать 1 ...

HTML5 - Canvas, drawImage() отрисовывает изображение размытым

... е изображение 7 на холсте, но оно выглядит размытым, несмотря 6 на определение размера холста. Как вы можете 5 видеть ниже, изображение четкое и четкое, тогда 4 как на холсте оно размытое и пиксельное. и 3 вот как это выглядит (левый - оригинал, а 2 правый - нарисованный и размытый холст.) Что 1 я делаю не так? console.log('Hello world') var c = document.getEleme ...

Fabric.js: получение объектов по имени

... ть подкласс, который позволит мне 4 добавлять настраиваемое свойство имени к 3 объектам. Но после этого я могу вызывать 2 объекты п ...

tkinter Canvas Scrollbar с сеткой?

... ой-то причине полоса 7 прокрутки идет к правому краю экрана и не 6 прокручивает. Разве холст не должен заканчиваться 5 на краю Frame2, а полоса прокрутки должна 4 находиться рядом с ним? Кроме того, я попробовал 3 rowspan увеличить высоту полосы прокрутки, чтобы 2 она соответствовала высоте кнопок 5x5. Это 1 тоже не работает. КОД (с использованием Python3.2): from tkinter imp ...

Могу ли я сделать так, чтобы ось Y двигалась вверх, а не вниз в HTML5 Canvas?

... угол с помощью translate(). context.translate(0, canvas.height); И я знаю, что 5 могу инвертировать ось Y с помощью scale(). context.scale(1, -1); Кажется, это 4 работает, за исключением того, что текст 3 отображается вверх ногами. Есть ли способ 2 заставить координаты холста раб ...

Как стилизовать элементы холста с помощью CSS

... , false); context.fillStyle = 'green'; // I'd like to set with CSS context.fill(); context.lineWidth = 5; // I'd like to set with CSS context.strokeStyle = '#003300'; // I'd like to set with CSS context.stroke(); http://jsfiddle.net/ned ...