wyraźna linia na płótnie HTML5

Question

Czy istnieje sposób na otwarcie linii? Na moim płótnie mam linię o kryciu 0,5 i szerokości 20 pikseli, powiedzmy. Teraz chcę zrobić to dłużej, czyli narysować kolejną linię prosto ze starego. , gdy to robisz, punkty dopasowania między starymi i nowymi liniami stają się mniej przezroczyste (ponieważ są teraz złożone z dwóch linii). , więc chcę oderwać starą linię, a następnie pogłaskać nową.

Jak mogę to zrobić?

dzięki

Answer 1

Sposób rysowania na kanwie jest ściśle zdefiniowany przez interfejs API, ale sposób jego wykonania w oprogramowaniu i/lub sprzęcie zależy od twórców przeglądarki. Niektóre przeglądarki używają przyspieszenia sprzętowego, a inne działają na nim. (np. za pomocą renderera oprogramowania)

W grafice komputerowej podczas rysowania czegoś, rysujesz do bufora. A kiedy wywołasz lineTo i stroke, bufor jest aktualizowany i wszystkie informacje znajdujące się w pikselach leżących u podstaw są tracone (lub częściowo tracone, jeśli używasz przezroczystości) i nie ma możliwości odzyskania go przez cofnięcie (chyba że istnieje implementacja zawierająca ładunki starych rysunków, ale byłoby to naprawdę ciężkie dla pamięci).

Dlatego, aby móc cofnąć udar może zaoszczędzić dużo czasu CPU/GPU ALE whould mocno zwiększyć pamięć

Answer 2

Przypuszczam najprostszym sposobem byłoby po prostu wyczyścić cały obszar roboczy (używając clearRect) i po prostu narysować całą linię ponownie

Answer 3

clearRect() jest jedynym sposobem, aby to zrobić. Dobrym sposobem na obejście tego (jeśli masz dużo elementów narysowanych na twoim płótnie) jest nałożenie dwóch płócien w HTML przy użyciu pozycjonowania absolutnego, użycie jednego dla "statycznego" rysunku i górnej warstwy dla rysunku, który planujesz czyścić/przerysowywać. Oszczędza to czas procesora, ponownie rysując całe płótno.

Answer 4

Innym eleganckim rozwiązaniem jest ustawienie „globalCompositeOperation” do „xor” i pomalować ty kolejce ponownie. ... więc zostanie usunięty