canvas

index | bclock | alfa | translate | clock | onjin.net

function init() {
  var canvas = document.getElementById('canvas');
  if(canvas.getContext) { // jeżeli przeglądarka obsługuje ...
    var ctx = canvas.getContext('2d'); // pobieramy kontekst naszych zabaw

    //fillRect(x,y,szerokość, wysokość); wypełniony prostokąt
    ctx.fillRect ( 5,5, 20,20);

    //strokeRect(x,y,szerokość, wysokość); prostokąt
    ctx.strokeRect ( 30,5, 20,20);

    //clearRect(x,y,szerokość, wysokość); czyści prostokątny obszar (do przeźroczystości)
    ctx.fillRect ( 55,5, 20,20);
    ctx.clearRect ( 60,10, 10,10);

    // zarządzanie ścieżkami
    // beginPath() - rozpoczyna budowe ścieżki
    // closePath() - zamyka ścieżkę
    // stroke()    - rysuje linię w/g ścieżki
    // fill()	   - wypełnia ścieżkę

    ctx.beginPath();
    // moveTo(x,y); przenosi kursor do współ. x i y
    ctx.moveTo(80, 5);
    // lineTo(x,y); rysuję linię od aktulanej pozycji do współ. x i y
    ctx.lineTo(100, 5);
    ctx.lineTo(100, 25);
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(105,5);
    ctx.lineTo(105,25);
    ctx.lineTo(125,25);
    // closePath() - zamykamy ścieżkę, aby otrzymać trójkąt zamknięty
    ctx.closePath();
    ctx.stroke();

    // arc(x, y, promień, kąt początkowy, kąt końcowy, odwrotnie do wsk. zegara)
    ctx.beginPath();
    ctx.arc(15, 40, 10, 0, Math.PI, 0);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(40, 40, 10, -Math.PI/2, Math.PI/2, 0);
    ctx.fill();

    ctx.beginPath();
    // quadraticCurveTo(cp1x, cp1y, x, y) - rysuje krzywą od aktulnej pozycji do x,y
	//   cp1x, cp1y - współrzędne punktu kontrolnego
    ctx.moveTo(55,50);
    ctx.quadraticCurveTo(55,30, 75,30);
    ctx.stroke();

    ctx.beginPath();
    // bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
	//  rysuje krzywą Beizera od aktualnej pozycji do x,y
	//  cp1x, cp1y, cp2x, cp2y - współ. punktów kontrolnych
    ctx.moveTo(80,30);
    ctx.bezierCurveTo(100,30, 80,50, 100, 50);
    ctx.stroke();

    ctx.beginPath();
    // rect(x, y, szerokość, wysokość) - tworzy ścieżkę kwadratową
    ctx.rect(105,30, 20,20);
    ctx.stroke();

    var img = new Image();
    img.src='img.gif';
    img.onload = function() {
      // drawImage(image, x, y) - umieszcza obraz 
      ctx.drawImage(img, 5,70);
      ctx.beginPath();
      ctx.moveTo(5,60);
      ctx.lineTo(25,60);
      ctx.lineTo(25,80);
      ctx.stroke();

      // skalowanie 
      // drawImage(image, x, y, szerokość, wysokość) - umieszcza obraz i skaluje
      ctx.drawImage(img, 30,60, 20,20);

      // wycinanie
      //drawImage(image, sx, sy, sSzerokość, sWysokość, dx, dy, dSzerokość, dWysokość)
	  //  wycina z obrazu prostokąt od sx, sy o wymiarach sSzerokość, sWysokość
	  //  i wstawia w miejsce dx, dy skalując do dSzerokość, dWysokość
      ctx.drawImage(img,0,5,5,5,55,60, 20,20);

      // style wypełnienia
      //ctx.fillStyle = "orange";
      //ctx.fillStyle = "#FFA500";
      //ctx.fillStyle = "rgb(255,165,0)";
      //ctx.fillStyle = "rgba(255,165,0,1)";
	  ctx.fillStyle = "orange";
      ctx.fillRect ( 80,60, 20,20);

	  //strokeStyle - styl rysowania linii
	  ctx.strokeStyle = "#00ff00";
	  ctx.strokeRect( 105,60, 20,20);

      // globalna przeźroczystość rysowanych (od tej pory) elementów
	  // ctx.globalAlpha = wartość (0..1)
	  ctx.fillRect(5, 85, 20,20);
	  ctx.globalAlpha = .5 // 0 = przeźroczysty; 1 = widoczny
	  ctx.strokeRect( 10,90, 10,10);

      // style linii
	  // lineWidth = value ; szerokość lini w pixelach
	  // lineCap  = type; typ lini: butt -prosty, round -wystające zaokrąglenia, square -wystające prostokąty
	  // lineJoin = type; typ połączenia linii; round - okrągły, bevel - zmiękczony, miter - zygzakowaty
	  // miterLimit = value; limit 'zygzakowania'
    }

  }
}