Pytania otagowane jako html5-canvas

Canvas to element HTML, który umożliwia dynamiczne, skryptowe renderowanie kształtów 2D, kształtów 3D, obrazów bitmapowych i animacji zarówno w 2D, jak i 3D.

23
Jak wyczyścić płótno do przerysowania
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 najbardziej wydajną opcją.
8
HTML5 Canvas vs. SVG vs. div
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 chcę zrobić, …
7
Jak zapisać płótno HTML5 jako obraz na serwerze?
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 serwerze Pozwól użytkownikowi pobrać obraz lub dodać go do galerii sztuk …
15
Jak zapisać obraz PNG po stronie serwera, z ciągu danych base64
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ą Canvas2Image, a następnie pobieram dane zakodowane w standardzie base64 …
10
Splamione płótna nie mogą być eksportowane
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 mi błąd: Uncaught SecurityError: Nie udało się wykonać polecenia „toDataURL” na „HTMLCanvasElement”: skażonych płócien nie można wyeksportować. Co powinienem zrobić?
11
Orientacja Exif po stronie klienta JS: Obracanie i lustrzane odbicie obrazów JPEG
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 aplikacjach internetowych obsługa orientacji EXIF ​​może być nierówna 1 . To …
11
jak narysować gładką krzywą przez N punktów za pomocą płótna javascript HTML5?
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 linii: W przypadku 2 punktów próbkowania po prostu …
11
Jak naprawić błąd getImageData () Kanwa została skażona przez dane pochodzące z innych źródeł?
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. część mojego kodu: jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || (this.pageX - …
8
Dostęp do danych rotacji JPEG EXIF ​​w JavaScript po stronie klienta
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 lokalnego, lokalnego <img>lub zdalnego <img>, danych EXIF, …
6
Zmiana koloru tła three.js na przezroczysty lub inny
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 poniższym przykładzie online, mam dołączoną animację do płótna, więc nie mogę …
7
Jak wyrównać element pozycjonowany absolutnie do środka?
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" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> Ale chciałbym ustawić oba płótna wyrównane na środku ekranu. …
104 css  html5-canvas 
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.