• 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
106 wizyt
pytanie zadane 15 kwietnia w Rozwój zawodowy, nauka, szkoła, praca przez Kubs Gaduła (3,560 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,560 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 Gaduła (3,000 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,560 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 Gaduła (3,000 p.)
Naprowadziłem na temat, ale od tego to już masz google :}
komentarz 15 kwietnia przez Kubs Gaduła (3,560 p.)
No ok :) Tak jeszcze na marginesie.. działasz w Javie? Szukam współtowarzysza do napisania aplikacji.
komentarz 15 kwietnia przez program naczelny Gaduła (3,000 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ź 88 wizyt
0 głosów
2 odpowiedzi 135 wizyt
pytanie zadane 9 marca w Nasze projekty przez Coding Studio Nowicjusz (150 p.)
+3 głosów
2 odpowiedzi 252 wizyt
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

65,755 zapytań

112,393 odpowiedzi

237,319 komentarzy

46,700 pasjonatów

Przeglądających: 137
Pasjonatów: 0 Gości: 137

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.

...