Programming/HTML/CSS2015. 4. 28. 11:08

Free Bootstrap Themes Site

부스트랩 무료 테마 모아둔 사이트

 - http://www.bootstrapstage.com/free-themes/



관리자 페이지 작업할때 쓰면 좋은 템플릿도 많다!! 나중에 참고하기~!


 




저작자표시 비영리 변경금지
Posted by 시니^^
Programming/HTML/CSS2014. 9. 27. 16:14

[HTML5] canvas 이용 화살표 있는 대각선 그리기

canvas 이용 머리쪽은 세모 아래쪽은 네모 대각선 그리기


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> canvas 이용 화살표 있는 대각선 그리기</title>
  5. </head>
  6. <body>
  7. <div style="width:402px;height:402px;border:1px solid;">
  8. <div style="position:absolute;"><canvas id="lineDiv1" height="400" width="400"></canvas></div>
  9. </div>
  10. <script type="text/javascript">
  11. function ArrowLine(id){
  12. this.headSize=10;
  13. this.endSize=6;
  14. this.canvas=document.getElementById(id);
  15. this.ctx=this.canvas.getContext("2d");
  16. this.ctx.lineWidth=1;
  17. this.ctx.strokeStyle='blue';
  18. this.ctx.fillStyle='blue';
  19. // var gradient=this.ctx.createLinearGradient(0,0,170,0);
  20. // gradient.addColorStop("0","red");
  21. // gradient.addColorStop("0.5","magenta");
  22. // gradient.addColorStop("1.0","blue");
  23. // this.ctx.strokeStyle=gradient;
  24. // this.ctx.fillStyle=gradient;
  25. };
  26. ArrowLine.prototype.draw=function(x1,y1,x2,y2){
  27. // draw the line
  28. this.ctx.beginPath();
  29. this.ctx.moveTo(x1,y1);
  30. this.ctx.lineTo(x2,y2);
  31. this.ctx.stroke();
  32. var radians = Math.atan((y2-y1)/(x2-x1));
  33. //Head
  34. headRadians = radians + ((x2>x1)?-90:90)*Math.PI/180;
  35. this.drawhead(this.ctx,x1,y1,headRadians);
  36. //End
  37. endRadians = radians + ((x2>x1)?90:-90)*Math.PI/180;
  38. this.drawEnd(this.ctx,x2,y2,endRadians);
  39. };
  40. ArrowLine.prototype.drawhead=function(ctx,x,y,radians){
  41. ctx.save();
  42. ctx.beginPath();
  43. ctx.translate(x,y);
  44. ctx.rotate(radians);
  45. ctx.moveTo(0,0);
  46. ctx.lineTo(5,this.headSize);
  47. ctx.lineTo(-5,this.headSize);
  48. ctx.closePath();
  49. ctx.restore();
  50. ctx.fill();
  51. };
  52. ArrowLine.prototype.drawEnd=function(ctx,x,y,radians){
  53. ctx.save();
  54. ctx.beginPath();
  55. ctx.translate(x,y);
  56. ctx.rotate(radians);
  57. ctx.moveTo(0,0);
  58. ctx.lineTo(-this.endSize,0);
  59. ctx.lineTo(this.endSize,0);
  60. ctx.lineTo(this.endSize,-this.endSize);
  61. ctx.lineTo(-this.endSize,-this.endSize);
  62. ctx.lineTo(-this.endSize,0);
  63. ctx.closePath();
  64. ctx.restore();
  65. ctx.fill();
  66. };
  68. var ArrowLine=new ArrowLine("lineDiv1");
  69. ArrowLine.draw(45,90,250,275);
  70. </script>
  71. </body>
  72. </html>


원본 참고 자료

http://stackoverflow.com/questions/16025326/html-5-canvas-complete-arrowhead

http://jsfiddle.net/m1erickson/Sg7EZ/


저작자표시 비영리 변경금지
Posted by 시니^^
Programming/HTML/CSS2014. 9. 26. 17:18

[HTML] 모바일 환경에서 풀스크린화면 처리

간단하게 프로트타입 웹앱 개발용


  1. <!-- 모바일용웹 -->
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  3. <!-- 안드로이드 홈화면추가시 상단 주소창 제거 -->
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <link rel="icon" href="/img/favicon.ico">
  6. <!-- ios홈화면추가시 상단 주소창 제거 -->
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <link rel="apple-touch-icon" href="/img/favicon.ico">



설명 잘되어있는 곳 링크

http://www.html5rocks.com/ko/mobile/fullscreen/


저작자표시 비영리 변경금지
Posted by 시니^^

티스토리툴바