Kumpulan Informasi Loker dan Kuliah di Indonesia

Monday, August 10, 2015

Web Game : Cap Dalam Canvas Line

4:30:00 PM Posted by Abdul Rohman No comments
Kemampuan lain dalam Canvas Line adalah Cap. Cap merupakan jenis garis yang terdiri dari tiga macam bentuk, yaitu:
  1. Butt
  2. Round
  3. Squere
Dalam pembuatan line sebelumnya termasuk jenis line butt yang merupakan defaultnya dari HTML 5 Canvas. Tag yang digunakan untuk menentukan tipe cap adalah:

context.lineCap=[tipe cap];

Contoh dibawah ini menerapkan 3 macam bentuyk yaitu butt, round dan squere yaitu:

<html>
    <head>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
           // butt line cap (top line)
           context.beginPath();
           context.moveTo(200, canvas.height / 2 - 50);
           context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
           context.lineWidth = 20;
           context.strokeStyle = "#0000ff"; // line color
           context.lineCap = "butt";
           context.stroke();
           // round line cap (middle line)
           context.beginPath();
           context.moveTo(200, canvas.height / 2);
           context.lineTo(canvas.width - 200, canvas.height / 2);
           context.lineWidth = 20;
           context.strokeStyle = "#0000ff"; // line color
           context.lineCap = "round";
           context.stroke();
           // square line cap (bottom line)
           context.beginPath();
           context.moveTo(200, canvas.height / 2 + 50);
           context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
           context.lineWidth = 20;
           context.strokeStyle = "#0000ff"; // line color
           context.lineCap = "square";
           context.stroke();
        };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="640" height="480">
        </canvas>
    </body>
</html>

Hasilnya:















.

0 komentar:

Post a Comment