Zegarek w CANVAS

Kategorie: html, informatyka, _blog, programowanie/html/canvas

Słowa kluczowe: html, informatyka, grafika, html5, zegarek, java, js, canvas

Komentarze: (0)

Jeden piksel

Postawiłem sobie nie dawno programistyczne zadanie - narysować biały ekran a na nim zaświecić (albo wygasić) jeden piksel. Postawiłem je sobie aby nauczyć się w JavaScript walczyć z grafiką, ale skoro przeszedłem z blogiem na HTML5 to mogę coś pocudować w SVG.

No to próbuję.

Próba w SVG

<svg width="50px" height="50px" style="background-color: #aaa;" >

<rect x="10px" y="10px" width="1px" height="1px"
            stroke= "black"
            stroke-width= "1px"/>

<circle cx="20px" cy="20px" r="1px"
            stroke="red" 
            stroke-width="1px"/>

<line x1="30px" y1="30px" x2="31px" y2="31px"
            stroke="red" 
            stroke-width="1px"/>
</svg>

No nie wiem, czy to można zaliczyć. Chyba nie.

Niestety, widać, że piksel zrobiony z kwadratu jest kwadratem, z koła kołem (nawet ma wypełnienie jak go powiększyć w przeglądarce, a z linii jest pikselem skierowanym w dół. Ale w SGV nie ma komendy punkt i to jest dziwne.

Niezaliczono!

Ale próbuję w CANVAS

Your user agent does not support the HTML5 Canvas element.

Jeżeli powyżej nie widać czarnego kwadratu to niezaliczono!

Próbuję po prostu DIV w HTML5

Maluje żółtego DIV 100 na 100 a w nim niebieskiego 1 na 1 i zobaczymy:

Kategorie: html, informatyka, _blog

Słowa kluczowe: svg, canvas, html, informatyka, grafika, html5, piksel, pixel

Komentarze: (2)

Spotkanie z SVG w HTML5

Przechodzę z blogiem na HTML5 a więc będę mógł sobie grafikę SVG wkładać bezpośrednio w treść notek. Kiedyś musiałem osadzać obiekty a teraz - o proszę, otwiera się frazę <svg> i się pisze coś, aby mieć taki obrazek.

<svg 
width="350px" 
height="350px" 
viewBox="0 0 500 500"         
xmlns="http://www.w3.org/2000/svg">

<rect x="10" y="10" width="100" height="100"
            fill= "yellow"
            fill-opacity= "1"
            stroke= "gray"
            stroke-width= "2"/>

<circle cx="100" cy="100" r="50"
            fill="darkblue"
            fill-opacity= "0.5"
            stroke="red" 
            stroke-width="2"/>

<line x1="100" y1="300" x2="300" y2="100"
            fill="darkblue"
            fill-opacity= "0.5"
            stroke="red" 
            stroke-width="2"/>

<path d="M97,246 C119,169 220,209 243,127 C291,27 281,223 419,271"
            fill="none"
            fill-opacity= "0.5"
            stroke="green" 
            stroke-width="3"/>        

<rect x="50" y="180" width="300" height="200"
            fill= "#55ff55"
            fill-opacity= "0.5"
            stroke= "#228822"
            stroke-width= "1"
rx="50" ry="100" />

<text style="fill:red; font-size:430%; font-family: arial;
font-weight:bold;" x="310" y="350">W34</text>

</svg>

Nie wiem jeszcze po co tak, ale próbuję. Stara notka o tym jak się to robiło w HTML 4 jest tu -> http://www.pp.org.pl/wojtek/?id=31260 i może zadziała a może nie.

No i jeszcze coś - jeszcze spróbuję z wzorami matematycznymi, bo to też jest fajne.

Kategorie: html, informatyka, _blog

Słowa kluczowe: svg, html, informatyka, grafika, html5

Komentarze: (1)