<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/mycanvas.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="js/myCreateJS2.js" type="text/javascript"></script>
</head>
<body>
<div class="canvas-wrapper">
    <canvas id="myCanvas" width="640" height="320"></canvas>
</div>
</body>
</html>
@charset "utf-8";
/*===============================================
リセットと初期設定
===============================================*/
*, *:before, *:after {
    box-sizing: border-box;
}
html {
}
body {
color: #333;
font-size: 16px;
font-family:Avenir,"Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"游ゴシック","Yu Gothic"," 游ゴシック体","YuGothic"," ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI"," メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
line-height: 160%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style:none;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0;
font-variant:normal;
}
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input, textarea, select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
input, textarea, select {
*font-size:100%;
}
legend {
color:#000;
}
input, textarea, select{
border: 1px solid #ddd;
border-radius: 5px;
padding: 4px 10px;
}
/*===============================================
リンクホバーの記述
===============================================*/
a{
text-decoration: none;
}
button {
    padding: 0;
    text-align: inherit;
    cursor: pointer;
    border: none;
    background: inherit;
    font-size: 100%;
	font:inherit;
}
a:hover,
button:hover{
text-decoration: underline;
} 
a img{
	-webkit-transition: all 0.4s ease 0s;
	-moz-transition: all 0.4s ease 0s;
	-ms-transition: all 0.4s ease 0s;
	-o-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
}
a img:hover {
	-webkit-opacity: 0.6;
	-moz-opacity: 0.6;
	opacity: 0.6;
}
/*===============================================
レスポンシブの記述
===============================================*/
img{
max-width: 100%;
height: auto;
width /***/:auto;
vertical-align:bottom;
}
/*===============================================
.spはPCで非表示SPで表示 .pcはPCで表示SPで非表示
===============================================*/
@media screen and (min-width: 1110px){
.sp{
	display:none;
}
}
@media screen and (max-width: 1110px){
.pc{
	display:none;
}
}
/*===============================================
ユーティリティ
===============================================*/
/* Font-Size */
	.font10 { font-size: 10px; }
	.font12 { font-size: 12px; }
	.font14 { font-size: 14px; }
	.font20 { font-size: 20px; }
	.font22 { font-size: 22px; }

/* Margin-Top & Padding-Top */
	.mt00 { margin-top:  0px; }    .pt00 { padding-top:  0px; }
	.mt05 { margin-top:  5px; }    .pt05 { padding-top:  5px; }
	.mt10 { margin-top: 10px; }    .pt10 { padding-top: 10px; }
	.mt15 { margin-top: 15px; }    .pt15 { padding-top: 15px; }
	.mt20 { margin-top: 20px; }    .pt20 { padding-top: 20px; }
	.mt25 { margin-top: 25px; }    .pt25 { padding-top: 25px; }
	.mt30 { margin-top: 30px; }    .pt30 { padding-top: 30px; }
	.mt35 { margin-top: 35px; }    .pt35 { padding-top: 35px; }
	.mt40 { margin-top: 40px; }    .pt40 { padding-top: 40px; }
	.mt45 { margin-top: 45px; }    .pt45 { padding-top: 45px; }
	.mt50 { margin-top: 50px; }    .pt50 { padding-top: 50px; }
	.mt55 { margin-top: 55px; }    .pt55 { padding-top: 55px; }
	.mt60 { margin-top: 60px; }    .pt60 { padding-top: 60px; }
	.mt65 { margin-top: 65px; }    .pt65 { padding-top: 65px; }
	.mt70 { margin-top: 70px; }    .pt70 { padding-top: 70px; }
	.mt75 { margin-top: 75px; }    .pt75 { padding-top: 75px; }
	.mt80 { margin-top: 80px; }    .pt80 { padding-top: 80px; }
	.mt85 { margin-top: 85px; }    .pt85 { padding-top: 85px; }
	.mt90 { margin-top: 90px; }    .pt90 { padding-top: 90px; }
	.mt95 { margin-top: 95px; }    .pt95 { padding-top: 95px; }
	.mt100{ margin-top:100px; }    .pt100{ padding-top:100px; }

/* Margin-Right & Padding-Right */
	.mr00 { margin-right:  0px; }  .pr00 { padding-right:  0px; }
	.mr05 { margin-right:  5px; }  .pr05 { padding-right:  5px; }
	.mr10 { margin-right: 10px; }  .pr10 { padding-right: 10px; }
	.mr15 { margin-right: 15px; }  .pr15 { padding-right: 15px; }
	.mr20 { margin-right: 20px; }  .pr20 { padding-right: 20px; }
	.mr25 { margin-right: 25px; }  .pr25 { padding-right: 25px; }
	.mr30 { margin-right: 30px; }  .pr30 { padding-right: 30px; }
	.mr35 { margin-right: 35px; }  .pr35 { padding-right: 35px; }
	.mr40 { margin-right: 40px; }  .pr40 { padding-right: 40px; }
	.mr45 { margin-right: 45px; }  .pr45 { padding-right: 45px; }
	.mr50 { margin-right: 50px; }  .pr50 { padding-right: 50px; }
	.mr55 { margin-right: 55px; }  .pr55 { padding-right: 55px; }
	.mr60 { margin-right: 60px; }  .pr60 { padding-right: 60px; }
	.mr65 { margin-right: 65px; }  .pr65 { padding-right: 65px; }
	.mr70 { margin-right: 70px; }  .pr70 { padding-right: 70px; }
	.mr75 { margin-right: 75px; }  .pr75 { padding-right: 75px; }
	.mr80 { margin-right: 80px; }  .pr80 { padding-right: 80px; }
	.mr85 { margin-right: 85px; }  .pr85 { padding-right: 85px; }
	.mr90 { margin-right: 90px; }  .pr90 { padding-right: 90px; }
	.mr95 { margin-right: 95px; }  .pr95 { padding-right: 95px; }
	.mr100{ margin-right:100px; }  .pr100{ padding-right:100px; }

/* Margin-Bottom & Padding-Bottom */
	.mb00 { margin-bottom:  0px; } .pb00 { padding-bottom:  0px; }
	.mb05 { margin-bottom:  5px; } .pb05 { padding-bottom:  5px; }
	.mb10 { margin-bottom: 10px; } .pb10 { padding-bottom: 10px; }
	.mb15 { margin-bottom: 15px; } .pb15 { padding-bottom: 15px; }
	.mb20 { margin-bottom: 20px; } .pb20 { padding-bottom: 20px; }
	.mb25 { margin-bottom: 25px; } .pb25 { padding-bottom: 25px; }
	.mb30 { margin-bottom: 30px; } .pb30 { padding-bottom: 30px; }
	.mb35 { margin-bottom: 35px; } .pb35 { padding-bottom: 35px; }
	.mb40 { margin-bottom: 40px; } .pb40 { padding-bottom: 40px; }
	.mb45 { margin-bottom: 45px; } .pb45 { padding-bottom: 45px; }
	.mb50 { margin-bottom: 50px; } .pb50 { padding-bottom: 50px; }
	.mb55 { margin-bottom: 55px; } .pb55 { padding-bottom: 55px; }
	.mb60 { margin-bottom: 60px; } .pb60 { padding-bottom: 60px; }
	.mb65 { margin-bottom: 65px; } .pb65 { padding-bottom: 65px; }
	.mb70 { margin-bottom: 70px; } .pb70 { padding-bottom: 70px; }
	.mb75 { margin-bottom: 75px; } .pb75 { padding-bottom: 75px; }
	.mb80 { margin-bottom: 80px; } .pb80 { padding-bottom: 80px; }
	.mb85 { margin-bottom: 85px; } .pb85 { padding-bottom: 85px; }
	.mb90 { margin-bottom: 90px; } .pb90 { padding-bottom: 90px; }
	.mb95 { margin-bottom: 95px; } .pb95 { padding-bottom: 95px; }
	.mb100{ margin-bottom:100px; } .pb100{ padding-bottom:100px; }

/* Margin-Left & Padding-Left */
	.ml00 { margin-left:  0px; }   .pl00 { padding-left:  0px; }
	.ml05 { margin-left:  5px; }   .pl05 { padding-left:  5px; }
	.ml10 { margin-left: 10px; }   .pl10 { padding-left: 10px; }
	.ml15 { margin-left: 15px; }   .pl15 { padding-left: 15px; }
	.ml20 { margin-left: 20px; }   .pl20 { padding-left: 20px; }
	.ml25 { margin-left: 25px; }   .pl25 { padding-left: 25px; }
	.ml30 { margin-left: 30px; }   .pl30 { padding-left: 30px; }
	.ml35 { margin-left: 35px; }   .pl35 { padding-left: 35px; }
	.ml40 { margin-left: 40px; }   .pl40 { padding-left: 40px; }
	.ml45 { margin-left: 45px; }   .pl45 { padding-left: 45px; }
	.ml50 { margin-left: 50px; }   .pl50 { padding-left: 50px; }
	.ml55 { margin-left: 55px; }   .pl55 { padding-left: 55px; }
	.ml60 { margin-left: 60px; }   .pl60 { padding-left: 60px; }
	.ml65 { margin-left: 65px; }   .pl65 { padding-left: 65px; }
	.ml70 { margin-left: 70px; }   .pl70 { padding-left: 70px; }
	.ml75 { margin-left: 75px; }   .pl75 { padding-left: 75px; }
	.ml80 { margin-left: 80px; }   .pl80 { padding-left: 80px; }
	.ml85 { margin-left: 85px; }   .pl85 { padding-left: 85px; }
	.ml90 { margin-left: 90px; }   .pl90 { padding-left: 90px; }
	.ml95 { margin-left: 95px; }   .pl95 { padding-left: 95px; }
	.ml100{ margin-left:100px; }   .pl100{ padding-left:100px; }

/* Float */
	.fl { float: left; }        .fr { float: right; }       .clear { clear:both; }

/* TextAlign */
	.al { text-align: left; }   .ar { text-align: right; }  .ac { text-align: center; }

/* Clearfix*/
	.clearfix { zoom:1; }
	.clearfix:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
/* Nav*/
	.nav { zoom:1; }
	.nav:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
	
/* Hidden */
	.hidden { display: none; }

/*===============================================

===============================================*/

/*===============================================
●480px以下時のCSS
===============================================*/
@media screen and (max-width: 480px){
 
} /* 480pxまで */
 
/*===============================================
●769px以下時のCSS
===============================================*/
@media screen and (max-width: 769px){
 
} /* 769pxまで*/
html,body{
	height:100%;
}
.canvas-wrapper{
	width:100%;
	height:100%;
	padding:20px;
}
canvas{
	display:block;
	background:rgba(204,204,204,0.2);
}
var width;//カンバスの幅
var height;//カンバスの高さ

var element;

var stage;

var mShape;//カンバスの中央からマウス座標までの直線オブジェクト
var wShape = new Array();

var lines = 20;

//現在のマウス座標、マウスムーブで呼ばれる
var mouseX;
var mouseY;

//ブラウザの中心から頂点までを半径とした円周上の点の座標
var endPX = new Array;
var endPY = new Array;
var radius;
var angle = new Array;
var angleSpeed = 0.2;
var angleSize = new Array;
var strokeStyle = new Array();


window.addEventListener("load", init);
window.addEventListener("resize", resize);

//ページが読み込まれたらカンバスを描画しマウスイベントを登録
function init() {
	width = $('.canvas-wrapper').width();
	height = $('.canvas-wrapper').height();
	$( '#myCanvas' ).get( 0 ).width = width;
	$( '#myCanvas' ).get( 0 ).height = height;

	// Stageオブジェクトを作成します
	stage = new createjs.Stage("myCanvas");

	for(var i = 0;i < lines;i++){
		endPX[i] = 0;	
		endPY[i] = 0;
		//線が動く幅
		angle[i] = i / 5;
		//後ろから4番目の線と先頭の角度を基準とする
		if(i == 4 || i == lines - 1){
			angleSize[i] = angleSpeed;
		}else if(i < 5){
			angleSize[i] = angleSpeed;
			strokeStyle[i] = 0.01;
		}else{
			angleSize[i] = angleSpeed + 0.1;
			strokeStyle[i] = 0.01;
		}
	}

	//ブラウザの対角線の長さを半径とする
	radius = Math.ceil(Math.sqrt(Math.pow(width,2) + Math.pow(height,2)));

	// 各エレメントを取得
	element = document.getElementById("myCanvas");
	mouseEvent();
}
//ウィンドウのサイズが変更された場合
function resize() {
	//カンバスの大きさの再計算
	width = $('.canvas-wrapper').width();
	height = $('.canvas-wrapper').height();
	//ブラウザの対角線の長さを半径とする
	radius = Math.ceil(Math.sqrt(Math.pow(width,2) + Math.pow(height,2)));
	$( '#myCanvas' ).get( 0 ).width = width;
	$( '#myCanvas' ).get( 0 ).height = height;
	drawLineCenter();
}
function mouseEvent(){

	function MouseOverFunc(e){
		mouseX = stage.mouseX;
		mouseY = stage.mouseY;

		drawLineCenter();

		// 自動的に画面更新させます。
		createjs.Ticker.addEventListener("tick", stage);
		// tick イベントを登録する
		createjs.Ticker.addEventListener("tick", handleTick);
		createjs.Ticker.timingMode = createjs.Ticker.RAF;
	}
	function MouseMoveFunc(e){
		mouseX = stage.mouseX;
		mouseY = stage.mouseY;
		drawLineCenter();
	}
	function MouseOutFunc(e){

	}

	// ------------------------------------------------------------
	// イベントのリッスンを開始する
	// ------------------------------------------------------------
	// イベントリスナーに対応している
	if(element.addEventListener){
		// マウスオーバー時に実行されるイベント
		element.addEventListener("mouseover" , MouseOverFunc);
		// マウスカーソルが移動するたびに実行されるイベント
		element.addEventListener("mousemove" , MouseMoveFunc);
		// マウスアウト時に実行されるイベント
		element.addEventListener("mouseout" , MouseOutFunc);
	// アタッチイベントに対応している
	}else if(element.attachEvent){
		// マウスオーバー時に実行されるイベント
		element.attachEvent("onmouseover" , MouseOverFunc);
		// マウスカーソルが移動するたびに実行されるイベント
		element.attachEvent("onmousemove" , MouseMoveFunc);
		// マウスアウト時に実行されるイベント
		element.attachEvent("onmouseout" , MouseOutFunc);
	}
}
function handleTick() {
	drawLineWindow();
}


//中央からマウス座標までの直線
function drawLineCenter(){
	if(mShape != null)stage.removeChild(mShape);
	mShape = null;
	mShape = new createjs.Shape();
		mShape.graphics
		.setStrokeStyle(0.1)
		.beginStroke("black")
		.moveTo(width/2,height/2)
		.lineTo(mouseX,mouseY)
		.closePath();
	stage.addChild(mShape);
	stage.update();
}
function drawLineWindow(){
	for(var i = 0; i < lines; i++){
		if(wShape[i] != null)stage.removeChild(wShape[i]);
		wShape[i] = null;
		if(i == 4 || i == lines - 1){
		/*
			wShape[i] = new createjs.Shape();
				wShape[i].graphics
				.setStrokeStyle(0.1)
				.beginStroke("red")
				.moveTo(mouseX,mouseY)
				.lineTo(endPX[i],endPY[i])
				.closePath();
			stage.addChild(wShape[i]);
		*/
		}else{
			wShape[i] = new createjs.Shape();
				wShape[i].graphics
				.setStrokeStyle(strokeStyle[i])
				.beginStroke("black")
				.moveTo(mouseX,mouseY)
				.lineTo(endPX[i],endPY[i])
				.closePath();
			stage.addChild(wShape[i]);
		}
		endPX[i] = Math.cos(Math.PI / 180 * angle[i]) * radius + mouseX;
		endPY[i] = Math.sin(Math.PI / 180 * angle[i]) * radius + mouseY;

		if(true) {
			//先頭と一番後ろは判定用
			if(i == 4 || i == lines - 1){
				angle[i] += angleSize[i];
			}else if(i < 5){
				angle[i] += angleSize[i];
			}else{
				//一番後ろ以下の角度になったとき加速
				if(angle[4] > angle[i]){
					angleSize[i] = angleSpeed + 0.1;
				//先頭以上の角度になったとき減速
				}else if(angle[i] > angle[lines - 1]){
					angleSize[i] = angleSpeed - 0.1;
				}
				angle[i] += angleSize[i];
			}
		}
	}
	stage.update();
}






External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.