Canvas HTML5: Cara Memberi Gaya Sudut Antar Garis

Untuk memberi gaya pada sudut antara garis maka diperlukan sebuah properti pada javascript yaitu lineJoin, dengan nilai miter, bevel, dan round, nilai default adalah miter. yang masing-masing akan terlihat perbedaanya pada contoh dibawah.

miter

Show/Hide Editor

<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="contoh1" style="width:50%;height:100%;"></canvas> <script> var garis = document.getElementById('contoh1').getContext('2d'); garis.beginPath(); garis.moveTo(10, 10); garis.lineTo(10, 60); garis.lineTo(60, 30); garis.lineTo(10, 10); garis.lineCap='butt'; garis.lineWidth=10; garis.strokeStyle='#ff0000'; garis.lineJoin='miter'; garis.stroke(); </script> </body> </html>
bevel

Show/Hide Editor

<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="contoh1" style="width:50%;height:100%;"></canvas> <script> var garis = document.getElementById('contoh1').getContext('2d'); garis.beginPath(); garis.moveTo(10, 10); garis.lineTo(10, 60); garis.lineTo(60, 30); garis.lineTo(10, 10); garis.lineCap='butt'; garis.lineWidth=10; garis.strokeStyle='#ff0000'; garis.lineJoin='bevel'; garis.stroke(); </script> </body> </html>
round

Show/Hide Editor

<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="contoh1" style="width:50%;height:100%;"></canvas> <script> var garis = document.getElementById('contoh1').getContext('2d'); garis.beginPath(); garis.moveTo(10, 10); garis.lineTo(10, 60); garis.lineTo(60, 30); garis.lineTo(10, 10); garis.lineCap='butt'; garis.lineWidth=10; garis.strokeStyle='#ff0000'; garis.lineJoin='round'; garis.stroke(); </script> </body> </html>

Untuk bisa mengeset maksimal panjang miter maka diperlukan properti yang lain yaitu miterLimit dengan nilai integer dan default 10. Perhatikan jika panjang miter melebihi panjang maksimal miter yang ditentukan, maka nilai properti lineJoin akan berubah menjadi bevel.

Canvas HTML5

Laman

Selasa, 15 April 2014

Cara Memberi Gaya Sudut Antar Garis

miter

bevel

round

Tidak ada komentar:

Posting Komentar