Zablokowane [HTML5][JS][PHP] Rysujemy captchę.

[Burner]

Czołgiem!



Patrząc na różne poradniki tutaj stwierdziłem, że muszę dodać "coś od siebie" troszeczkę na innym poziomie, troszeczkę z kosmosu.



Do rzeczy: zajmiemy się dziś "rysowaniem" captchy. Co to jest captcha każdy oczywiście wie, nic innego jak tekst z obrazka do przepisania, jednak nasza nie będzie obrazkiem .jpg czy .png, będzie w całości napisana i tworzona w HTML5, CSS, Javascript oraz PHP.



HTML5 dał nam wiele nowych możliwości, między innymi canvas. Canvas jest to coś w stylu płótna malarskiego, na którym można sobie dowolnie rysować, tudzież pisać. Canvasem operujemy przez Javascript. Może bez zbędnego chranienia(co mam w nawyku) po prostu zacznijmy.



Liczę na to, że każdy potrafi stworzyć podstawowy dokument HTML z sekcjami oraz .

Nasz canvas będzie miał id "can", więc w sekcji stwórzmy sobie styl, który da mu ładne obramowanie.



[code][/code]



OK, teraz pracujemy już tylko na . Stwórzmy sobie element canvas, określmy jego szerokość na 450px, wysokość na 150px, dajmy mu id "can" i od razu zamknijmy.


[code][/code]



Oczywiście wszystko co ja tutaj podaję to tylko moje widzimisie, rozmiary, id i tak dalej można dać oczywiście według własnego uznania.



Teraz zacznie się jazda. Cały kod Javascript będziemy pisali w PHP(wtf?). Dlaczego? Po napisaniu całości zmienną z tekstem z obrazka będziemy mieli dostępną od razu od strony PHP, daje nam to troszkę większe możliwości i tak dalej, i tak dalej..



Teraz zachodzi pytanie: Jak pisać w Javascript przez PHP? Proste:



Cały skrypt PHP, który napiszemy jest NAJPIERW interpretowany i wykonywany przez serwer, my widzimy tylko wynik, dlatego też na jakiejkolwiek stronie wciskając Ctrl + U nie widzimy kodu PHP, z drugiej strony Javascript działa po stronie klienta, oznacza to, że widzimy jego kod i to nasza przeglądarka go wykonuje, do rzeczy: prawie wszystko będzie działało po prostu przez 'echo'.



Lecimy, najpierw zadajemy sobie pytanie "jakie funkcje czy też możliwości ma mieć nasza captcha?". U mnie będą to:



- zmienna z zapisanym tekstem z obrazka

- losowe znaki małe, duże oraz cyfry

- każdy znak w losowym kolorze

- każdy znak napisany losową czcionką

Zaczniemy od początku, czyli zmienna oraz losowe znaki. (oczywiście działamy w pomiędzy znacznikami !!) Stwórzmy sobie więc pustą zmienną o genialnej nazwie "captcha".


[code]$captcha = '';[/code]


Teraz znaki, zacznijmy od otwarcia oraz zamknięcia znacznika



by smigieleQ