Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html> <body> <canvas id="lineCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> <script> var canvas = document.getElementById("lineCanvas"); var ctx = canvas.getContext("2d"); // Line Cap Styles var caps = ["butt", "round", "square"]; ctx.lineWidth = 15; ctx.strokeStyle = "#0070C0"; for (var i = 0; i < caps.length; i++) { ctx.lineCap = caps[i]; ctx.beginPath(); ctx.moveTo(20 + i * 50, 10); ctx.lineTo(20 + i * 50, 100); ctx.stroke(); } // Line Join Styles var joins = ["miter", "round", "bevel"]; ctx.lineWidth = 10; ctx.strokeStyle = "#FF8C00"; ctx.lineCap = "butt"; for (var j = 0; j < joins.length; j++) { ctx.lineJoin = joins[j]; ctx.beginPath(); ctx.moveTo(180, 10 + j * 40); ctx.lineTo(220, 35 + j * 40); ctx.lineTo(180, 60 + j * 40); ctx.stroke(); } </script> </body> </html>
