16. HTML5 Canvas [Line Join, Calibri, strokeText]

Hello Canvas!!

How to use Line Join, Calibri, strokeText

소스보기해서 주석을 읽어보자

[SOURCE VIEW]

<canvas id = "myCanvas" width = "600" height = "400" style = "border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // set line width for all lines context.lineWidth = 25; // miter line join (left) context.beginPath(); context.moveTo(20, 150); context.lineTo(70, 50); context.lineTo(120, 150); context.lineJoin = 'miter'; context.stroke(); context.beginPath(); context.moveTo(150, 150); context.lineTo(200, 50); context.lineTo(250, 150); context.lineJoin = 'miter'; context.stroke(); // round line join (middle) context.beginPath(); context.moveTo(310, 150); context.lineTo(360, 50); context.lineTo(410, 150); context.lineJoin = 'round'; context.stroke(); context.beginPath(); context.moveTo(430, 150); context.lineTo(480, 50); context.lineTo(530, 150); context.lineJoin = 'round'; context.stroke(); // bevel line join (right) context.beginPath(); context.moveTo(20, 320); context.lineTo(70, 220); context.lineTo(120, 320); context.lineJoin = 'bevel'; context.stroke(); context.beginPath(); context.moveTo(150, 320); context.lineTo(200, 220); context.lineTo(250, 320); context.lineJoin = 'bevel'; context.stroke(); context.font = "50pt Calibri"; context.lineWidth = 3; context.strokeStyle = "blue"; context.strokeText("miter", 20,200); context.strokeText("round", 310,200); context.strokeText("bevel", 20,370); context.strokeText("miter & text", 250,370); context.beginPath(); context.moveTo(310, 320); context.lineTo(360, 220); context.lineTo(410, 320); context.lineJoin = 'round'; context.stroke(); context.beginPath(); context.moveTo(430, 320); context.lineTo(480, 220); context.lineTo(530, 320); context.lineJoin = 'round'; context.stroke(); </script>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas