• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak wykonać te polecenia używając JavaScript, HTML,CSS?

0 głosów
99 wizyt
pytanie zadane 15 kwietnia w Rozwój zawodowy, nauka, szkoła, praca przez Kubs Gaduła (3,500 p.)
edycja 15 kwietnia przez Kubs

Witajcie,

próbuje stworzyć kształt w którym następnie chcę umieścić zdjęcia o wymiarach tego właśnie kształtu. Taki dokładnie wpasowany <div> w ten kształt narysowany w canvas. 

Mam polecenia jak to wykonać. Proszę pomóżcie jak to dokładnie zrobić.

  1. Robisz przejrzystego div-a
  2. Do niego przypinasz <canvas>, nadajesz mu wymiary takie jak ma div.
  3. Tworzysz znacznik img i do niego ładujesz zdjęcie.
  4. Zdjęcie wyświetlasz na canvasie.
  5. Rysujesz na canvasie "ścieżkę odcinania".
  6. Pobierasz dane z canvasu i w pętli przebiegasz wszystkie piksele w canvasie. W pętli tej sprawdzasz, czy punkt leży wewnątrz ścieżki, czy na zewnątrz (jest na to odpowiednia funkcja). Jeśli punkt leży na zewnątrz ścieżki, to ustawiasz przeźroczystość w kanale alpha.

 

 

 

2 odpowiedzi

0 głosów
odpowiedź 15 kwietnia przez Filipek123 Użytkownik (840 p.)
edycja 18 kwietnia przez JSHolic
.canvas {

width 100%

height 100px;

}

.divider{

width: 100%;

height: 1px;

}
<body>

<div class="canvas">

<img src="ścieżka zdjęcia"></img>

</div>

<div class="divider">

</div>

</body>


nie rozumiem o co chodzi ścieżkę odcinania, założę więc, że jest to divider. z 6 ci nie pomogę ponieważ nie rozumiem o co zbytnio z tym chodzi.

komentarz 15 kwietnia przez Kubs Gaduła (3,500 p.)
Dzięki, też próbuje zrozumieć o co chodzi w tej ścieżce odcinania.
0 głosów
odpowiedź 15 kwietnia przez program naczelny Bywalec (2,880 p.)

Rozumiem o co chodzi z tą ścieżką odcinania, ale to jest zupełnie bezcelowe, oraz trudne. Zamiast tego lepiej użyć formatu zdjęcia który obsługuje przeźroczystość i obrobić zdjęcie np: w gimpie. Używając np gifa, możesz bez problemu tak zrobić. W tej sytuacji:
- tworzysz oraz później pobierasz zdjęcie do zmiennej

const img = new Image();

img.onload = function(){
  // image  has been loaded
};

img.src = image_url;

- wyświetlasz je na twoim canvasie - kiedy nie definiujesz koloru płótno jest przeźroczyste
 

Nie potrzeba tu wielkiej filozofii

komentarz 15 kwietnia przez Kubs Gaduła (3,500 p.)
Dziękuje serdecznie. Nie za bardzo wciąż rozumiem to wszystko. A mógłbyś napisać jak mniej więcej będzie wyglądał kod w punktach 1-4?
komentarz 15 kwietnia przez program naczelny Bywalec (2,880 p.)
Naprowadziłem na temat, ale od tego to już masz google :}
komentarz 15 kwietnia przez Kubs Gaduła (3,500 p.)
No ok :) Tak jeszcze na marginesie.. działasz w Javie? Szukam współtowarzysza do napisania aplikacji.
komentarz 15 kwietnia przez program naczelny Bywalec (2,880 p.)
Umiem c++ oraz frontend, natomiast javy jeszcze nie dotykałem. Nigdy nie widziałem jej potrzeby użycia. Generalnie to z interfejsem javy myślę że nie ma problemu, nauczyłbym się w tydzień max. Możesz napisać na priv jakie cudo tworzysz to pomyślimy ;)

Podobne pytania

0 głosów
1 odpowiedź 77 wizyt
0 głosów
2 odpowiedzi 126 wizyt
pytanie zadane 9 marca w Nasze projekty przez Coding Studio Nowicjusz (150 p.)
+3 głosów
2 odpowiedzi 247 wizyt
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

63,336 zapytań

109,595 odpowiedzi

228,945 komentarzy

44,064 pasjonatów

Przeglądających: 242
Pasjonatów: 12 Gości: 230

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...