5.00 / 1 oy

JavaScript ile Html'de canvas'a smiley çizdirmek

Javascript ile html üzerinde Path kullanarak çizimler yapmak mümkün. Bu çizimlere dair birkaç örnek paylaşmak istiyorum, giriş olarak da gecenin son sorusunu bu örneğe ayırmak istedim.

Gülen yüz emojisi, iç içe 4 şekilden oluşuyor:

1. Dışarıda büyük bir halka (yüz)

2. İçeride sol tarafta küçük bir daire (sol göz)

3. İçeride sağ tarafta küçük bir daire (sağ göz)

4. Bir arc (gülen ağız)

Bu şekillerin çizdirilerek doğru yerlere konumlandırması ile şu şekilde bir çıktı alabiliyoruz:

javascript html smiley emoji

Şimdi bu şekli alabilmek için nasıl bir kodlamaya ihtiyacımız olduğuna bakalım. Html tarafında, üzerine çizim yapacağımız bir canvas (tuval) gerekli. Boyutları ise bize kalmış.

<canvas id="tuval" style="height: 200px;width: 400px;"></canvas>

JavaScript ile bu tuvali boyayalım:

var canvas = document.getElementById('tuval');
  if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
    
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Yüz
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Ağız
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Sol göz
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Sağ göz
    ctx.stroke();
  }
  }
  draw();

Şimdi işi biraz daha eğlenceli hale getirelim ve emojileri renklendirelim.

html emoji javascript canvas

Kodlar:

function sevin() {

  var canvas = document.getElementById('tuval');
  if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
	
	ctx.fillStyle = "#d1d118";
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
	ctx.fill();
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false); ///////////////
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI , true);
    ctx.stroke();
  }
  }
  
  function uzul() {

  var canvas = document.getElementById('tuval2');
  if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
	
	ctx.fillStyle = "#c82124";
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
	ctx.fill();
    ctx.moveTo(110, 110);
    ctx.arc(75, 110, 35, 0, Math.PI, true); ///////////////////
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
    ctx.stroke();
  }
  }
  sevin();
  uzul();

 

utku33

10.03.2020 05:53

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
JavaScript ile Html'de canvas'a smiley çizdirmek

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.