IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

Isečci

Možemo i sakrivati neželjene delove crteža, i tako postizati razne efekte. Funkcija za to je:

clip()

Evo primera:

<html><head>
<script type="application/javascript">
function crtaj() {
  canvas = document.getElementById("kocke");
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    ctx.fillRect(0,0,150,150);
    ctx.translate(75,75);
    // Kreiranje kružnog isečka
    ctx.beginPath();
    ctx.arc(0,0,60,0,Math.PI*2,true);
    ctx.clip();
    // Crtanje pozadina
    lingrad = ctx.createLinearGradient(0,-75,0,75);
    lingrad.addColorStop(0, "#232256");
    lingrad.addColorStop(1, "#143778");
    ctx.fillStyle = lingrad;
    ctx.fillRect(-75,-75,150,150);
    // crtanje zvezda
    for (j = 1; j < 50; j++){
       ctx.save();
       ctx.fillStyle = "#fff";
       ctx.translate(75-Math.floor(Math.random()*150), 75-Math.floor(Math.random()*150));
       drawStar(ctx,Math.floor(Math.random()*4)+2);
       ctx.restore();
    }
  }
}
function drawStar(ctx,r){
  ctx.save();
  ctx.beginPath()
  ctx.moveTo(r,0);
  for (i = 0; i < 9; i++){
    ctx.rotate(Math.PI/5);
    if (i%2 == 0) {
       ctx.lineTo((r/0.525731)*0.200811,0);
    } else {
       ctx.lineTo(r,0);
    }
  }
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}
</script>
</head><body onload="crtaj();">
<canvas id="kocke" width="600" height="600"></canvas>
</body></html>

Copyright © 2010 BUbaj. Powered By bubaj.com
JavaScript    Sintaksa    Osnovne funkcije    Kontrolne strukture    Dogadjaji    Browser funkcije    HTML DOM objekti    Tabele    JS i CSS    CANVAS    Skripte