17. HTML5 Canvas [LineDash,lineTo, arcTo, rounded corners]

Hello Canvas!!

How to use LineDash,lineTo,arcTo,rounded corners

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

[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'); var rectWidth =300; var rectHeight =100; var rectX =189; var rectY =50; var cornerRadius=50; context.beginPath(); /* context.moveTo(시작점 x, 시작점 y); context.lineTo(직선 끝점 x,직선 끝점 y); context.arcTo(라운드 코너 외 사각형 꼭지점 x ,라운드코너 외사각형 꼭지점 y, 라운드 코너 끝점 x, 라운드 코너 끝점 y, 라운드 사이즈); context.lineTo(직선 끝점 x, 직선 끝점 y); */ context.moveTo(rectX + cornerRadius,rectY); context.lineTo(rectX + rectWidth - cornerRadius ,rectY); context.arcTo(rectX + rectWidth, rectY , rectX + rectWidth, rectY + cornerRadius, cornerRadius); context.lineTo(rectX + rectWidth, rectY + rectHeight); context.arcTo(rectX + rectWidth,rectY +rectHeight +cornerRadius, rectX + rectWidth -cornerRadius, rectY + rectHeight +cornerRadius, cornerRadius); context.lineTo(rectX +cornerRadius, rectY + rectHeight + cornerRadius); context.arcTo(rectX,rectY +rectHeight +cornerRadius, rectX, rectY + rectHeight , cornerRadius); context.lineTo(rectX, rectY + cornerRadius); context.arcTo(rectX,rectY , rectX + cornerRadius, rectY , cornerRadius); context.lineWidth = 5; context.stroke(); context.beginPath(); // ----------- setLineDash([]); context.fillText("setLineDash([6, 5]);", 100, 280); context.setLineDash([6, 5]); context.strokeStyle = "blue"; context.lineWidth = 4; context.moveTo(100, 300); context.lineTo(500, 300); context.stroke(); context.beginPath(); // ----------- resetLineDash([]); context.fillText("setLineDash([]);", 100, 330); context.setLineDash([]); context.strokeStyle = "blue"; context.lineWidth = 4; context.moveTo(100, 350); context.lineTo(500, 350); context.stroke(); </script>

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