Templates by BIGtheme NET
Anasayfa / HTML5 / HTML5 Canvas ile Çizgi Çizmek

HTML5 Canvas ile Çizgi Çizmek

Hadi kodlarla çizgiler çizelim.

HTML5 Canvas kullanarak bir çizgi çizmek için, beginPath (), moveTo (), lineTo () ve inme () yöntemlerini kullanabilirsiniz.

Öncelikle, biz yeni bir yol çizmek üzere olduğunu bildirmek için beginPath () yöntemini kullanabilirsiniz. Sonra, yeni bir konuma başlangıç pozisyonuna düz bir çizgi çizmek için lineTo () yöntemini kullanın ardından bağlam noktası (yani çizim imleç) konumuna moveTo () yöntemini kullanabilirsiniz ve. Nihayet, çizgi görünür hale getirmek için, biz kontur kullanarak hattına kontur uygulayabilirsiniz (). Aksi belirtilmedikçe, kontur rengi siyah öndeğer edilir.

Örnek çizim:

 

 

indir

Kod:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="cizgi" width="678" height="320"></canvas>
    <script>
      var canvas = document.getElementById('cizgi');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(100, 150);
      context.lineTo(450, 50);
      context.stroke();
    </script>
  </body>
</html>