'Programming/HTML/CSS' 카테고리의 글 목록

'Programming/HTML/CSS'에 해당되는 글 6건

2015.04.28 Free Bootstrap Themes Site
2014.09.27 [HTML5] canvas 이용 화살표 있는 대각선 그리기
2014.09.26 [HTML] 모바일 환경에서 풀스크린화면 처리
2014.04.24 [CSS][Bootstrap3] Glyphicons 관련
2014.04.23 반응형 웹 사이즈 테스트
2014.04.23 Front-end Framework Twitter Bootstrap ( 반응형웹 )

Free Bootstrap Themes Site

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

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

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

저작자표시 비영리 변경금지

Posted by 시니^^

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

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

<!DOCTYPE html>
<html>
<head>
<title> canvas 이용 화살표 있는 대각선 그리기</title>
</head>
<body>
<div style="width:402px;height:402px;border:1px solid;">
<div style="position:absolute;"><canvas id="lineDiv1" height="400" width="400"></canvas></div>
</div>
<script type="text/javascript">
function ArrowLine(id){
this.headSize=10;
this.endSize=6;
this.canvas=document.getElementById(id);
this.ctx=this.canvas.getContext("2d");
this.ctx.lineWidth=1;
this.ctx.strokeStyle='blue';
this.ctx.fillStyle='blue';
// var gradient=this.ctx.createLinearGradient(0,0,170,0);
// gradient.addColorStop("0","red");
// gradient.addColorStop("0.5","magenta");
// gradient.addColorStop("1.0","blue");
// this.ctx.strokeStyle=gradient;
// this.ctx.fillStyle=gradient;
};
ArrowLine.prototype.draw=function(x1,y1,x2,y2){
// draw the line
this.ctx.beginPath();
this.ctx.moveTo(x1,y1);
this.ctx.lineTo(x2,y2);
this.ctx.stroke();
var radians = Math.atan((y2-y1)/(x2-x1));
//Head
headRadians = radians + ((x2>x1)?-90:90)*Math.PI/180;
this.drawhead(this.ctx,x1,y1,headRadians);
//End
endRadians = radians + ((x2>x1)?90:-90)*Math.PI/180;
this.drawEnd(this.ctx,x2,y2,endRadians);
};
ArrowLine.prototype.drawhead=function(ctx,x,y,radians){
ctx.save();
ctx.beginPath();
ctx.translate(x,y);
ctx.rotate(radians);
ctx.moveTo(0,0);
ctx.lineTo(5,this.headSize);
ctx.lineTo(-5,this.headSize);
ctx.closePath();
ctx.restore();
ctx.fill();
};
ArrowLine.prototype.drawEnd=function(ctx,x,y,radians){
ctx.save();
ctx.beginPath();
ctx.translate(x,y);
ctx.rotate(radians);
ctx.moveTo(0,0);
ctx.lineTo(-this.endSize,0);
ctx.lineTo(this.endSize,0);
ctx.lineTo(this.endSize,-this.endSize);
ctx.lineTo(-this.endSize,-this.endSize);
ctx.lineTo(-this.endSize,0);
ctx.closePath();
ctx.restore();
ctx.fill();
};
var ArrowLine=new ArrowLine("lineDiv1");
ArrowLine.draw(45,90,250,275);
</script>
</body>
</html>

원본 참고 자료

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

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

저작자표시 비영리 변경금지

Posted by 시니^^

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="/img/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="/img/favicon.ico">