php_group
/
htdoc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/flash1.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/hammer.min.js"></script>
</head>
<body>
<div id="wrapper2" class="wrapper2">
	<div class="bg"></div>
	<div class="candle candle2">
		<div class="fire"></div>
	</div>
	<div class="candle candle1">
		<div class="fire"></div>
	</div>
</div>
<canvas id="myCanvas" width="808" height="640"></canvas>

<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var isPress = false;

var hammer = document.getElementById("wrapper2");
var mc = new Hammer(hammer);
mc.on("press", function(ev) {
    isPress = true;
});
mc.on("pressup", function(ev) {
    isPress = false;
});
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.on("panleft panright", function(ev) {
    var e = ev;
    e.pageX = ev.center.x;
    moveEvent(e);
});

$(".candle1").mousedown(function(){
	isPress = true;
});
$(window).mouseup(function(){
	isPress = false;
});
$(".wrapper2").mousemove(function(e){
	moveEvent(e);
});

function moveEvent(e){
	var mouseX = e.pageX;
	if (isPress && mouseX<270 && mouseX > 77){
		var top = -0.43*mouseX + 600 - 110;
		$(".candle1").css({
			"left":mouseX,
			"top" :top
		});
		drawing();	
	}
}

function drawing(){
  ctx.clearRect(0,0,808,640);
  var x1 = parseInt($(".candle1").css('left')) + 6;
  var y1 = parseInt($(".candle1").css('top')) - 20;
  var y2 = parseInt($(".candle1").css('top')) + 49;

  var a1 = (312-y1)/(489-x1);
  var b1 = 312 - (489*((312-y1)/(489-x1)));
  var endx1 = 626;
  var endy1 = a1*endx1+b1;

  var a2 = (312-y2)/(489-x1);
  var b2 = 312 - (489*((312-y2)/(489-x1)));
  var endy2 = a2*endx1+b2;

  ctx.strokeStyle = "#0000FF";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(endx1, endy1);
  ctx.moveTo(x1, y2);
  ctx.lineTo(endx1, endy2);

  var endHeight = endy1-endy2;
  var scaleRate = endHeight/($('.candle2').height()+20);
  $('.candle2').css('transform',"scale(-"+scaleRate+")");
  
  ctx.stroke();
  ctx.closePath();
}

</script>
</body>
</html>