Pytania oznaczone «html5-canvas»

Po eksperymentowaniu z operacjami złożonymi i rysowaniu obrazów na płótnie próbuję teraz usunąć obrazy i kompozycję. Jak mam to zrobic? Muszę wyczyścić płótno, aby przerysować inne obrazy; to może trwać przez jakiś czas, więc nie sądzę, aby rysowanie nowego prostokąta za każdym razem było...

Jakie jest najlepsze podejście do tworzenia elementów w locie i możliwości ich przenoszenia? Załóżmy na przykład, że chcę utworzyć prostokąt, okrąg i wielokąt, a następnie wybrać te obiekty i przesunąć je. Rozumiem, że HTML5 zapewnia trzy elementy, które mogą to umożliwić: svg , canvas i div . Co...

Jak mogę automatycznie skalować <canvas>element HTML5 , aby pasował do strony? Na przykład mogę uzyskać <div>skalowanie, ustawiając właściwości heighti widthna 100%, ale <canvas>nie będzie skalować,

Pracuję nad generatywnym projektem artystycznym, w którym chciałbym umożliwić użytkownikom zapisywanie powstałych obrazów z algorytmu. Ogólna idea to: Utwórz obraz na kanwie HTML5 przy użyciu algorytmu generatywnego Po ukończeniu obrazu zezwól użytkownikom na zapisanie płótna jako pliku obrazu na...

Chcę mieć stronę internetową, która ma jedno wyśrodkowane słowo. Chcę, aby to słowo zostało narysowane za pomocą animacji, tak aby strona „zapisała” to słowo w taki sam sposób, jak my, tzn. Zaczyna się w jednym punkcie i rysuje linie i krzywe w czasie, tak aby końcowy wynik był glifem. Nie dbam...

Korzystam z narzędzia JavaScript „Canvas2Image” Nihilogic do konwersji rysunków na obrazy w formacie PNG. Teraz potrzebuję przekształcić ciągi base64 generowane przez to narzędzie w rzeczywiste pliki PNG na serwerze, używając PHP. Krótko mówiąc, obecnie tworzę plik po stronie klienta za pomocą...

Chcę zapisać moje płótno na obrazie. Mam tę funkcję: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } Daje...

Zdjęcia z aparatów cyfrowych są często zapisywane w formacie JPEG ze znacznikiem „orientacji” EXIF. Aby wyświetlać poprawnie, obrazy muszą być obracane / lustrzane w zależności od ustawionej orientacji, ale przeglądarki ignorują tę informację, renderując obraz. Nawet w dużych komercyjnych...

Używam elementów kanwy html5 do zmiany rozmiaru obrazów w mojej przeglądarce. Okazuje się, że jakość jest bardzo niska. Znalazłem to: Wyłącz interpolację podczas skalowania <canvas>, ale nie pomaga to w poprawie jakości. Poniżej znajduje się mój kod css i js, a także obraz wyskalowany w...

W przypadku aplikacji do rysowania zapisuję współrzędne ruchu myszy w tablicy, a następnie rysuję je za pomocą lineTo. Wynikowa linia nie jest gładka. Jak mogę utworzyć pojedynczą krzywą między wszystkimi zebranymi punktami? Wyszukałem w Google, ale znalazłem tylko 3 funkcje do rysowania...

Mój kod działa bardzo dobrze na moim hoście lokalnym, ale nie działa w witrynie. Otrzymałem ten błąd z konsoli, dla tej linii .getImageData(x,y,1,1).data: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data....

Chciałbym obracać zdjęcia na podstawie ich oryginalnego obrotu, ustawionego przez aparat w danych obrazu JPEG EXIF. Rzecz w tym, że wszystko to powinno się odbywać w przeglądarce, używając JavaScript i <canvas>. W jaki sposób JavaScript może uzyskać dostęp do JPEG, obiektu API pliku...

Próbowałem zmienić domyślny kolor tła mojego płótna z czarnego na przezroczysty / dowolny inny kolor - ale bez powodzenia. Mój HTML: <canvas id="canvasColor"> Mój CSS: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> Jak widać w...

Czy jest jakiś powód, poza wydajnością, by używać WebGL zamiast 2D-Canvas dla grach / aplikacjach 2D ? Innymi słowy, jakie funkcjonalności 2D oferuje WebGL, których nie da się łatwo osiągnąć za pomocą

Próbuję ułożyć razem dwa płótna i uczynić je podwójnym płótnem. Widziałem tutaj przykład: <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"...

Próbuję zmienić rozmiar niektórych obrazów za pomocą płótna, ale nie mam pojęcia, jak je wygładzić. W Photoshopie, przeglądarkach itp. Jest kilka algorytmów, których używają (np. Bicubic, bilinear), ale nie wiem, czy są one wbudowane w płótno, czy nie. Oto moje skrzypce:...

Jestem w sumie n00b z HTML5i pracuję z canvasrenderowanie kształty, kolory i tekst. W mojej aplikacji mam adapter widoku, który dynamicznie tworzy kanwę i wypełnia ją zawartością. Działa to naprawdę fajnie, poza tym, że mój tekst jest bardzo rozmyty / rozmyty / rozciągnięty. Widziałem wiele...

Zamknięte . To pytanie musi być bardziej skoncentrowane . Obecnie nie przyjmuje odpowiedzi. Chcesz poprawić to pytanie? Zaktualizuj pytanie, aby skupiało się tylko na jednym problemie, edytując ten post . Zamknięte 7 lat temu . Popraw to pytanie...

Proszę spojrzeć na następujący przykład: http://jsfiddle.net/MLGr4/47/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); img = new Image(); img.onload = function(){ canvas.width = 400; canvas.height = 150; ctx.drawImage(img, 0, 0, img.width, img.height, 0,...

Czy istnieje sposób na odczytanie zawartości HTML Canvas jako danych binarnych? W tej chwili mam następujący HTML, aby pokazać plik wejściowy i płótno poniżej: <p><button id="myButton" type="button">Get Image Content</button></p> <p>Input:<input id="fileInput"...