プログラミングとイラストレーション » 円上を動くオブジェクト|HTML5
プログラミングとイラストレーション > HTML5 > 円上を動くオブジェクト|HTML5

円上を動くオブジェクト|HTML5

円上を動くオブジェクト|HTML5

円上を動くオブジェクト(HTML5, JavaScript, CSS3) : デモ

円上を動くオブジェクト(HTML5, JavaScript, CSS3) : ZIPファイル(4kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>円上を動くオブジェクト|Object move on circle</title>
		<link href="css/base.css" rel="stylesheet" type="text/css">
		<script src="js/base.js"></script>
	</head>
	<body>
		<div id="contents">
			<canvas id="canvas" width="300" height="300">
			</canvas>
		</div>
	</body>
</html>

2.CSS

@charset "utf-8";

body
{
	margin:0;
	padding:0;
	background-color: #fff;
	font-family:Helvetica, HiraKakuProN-W3, sans-serif; 
	font-size:25px;
	color:#fff;
}

#contents
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height:300px;
	border: 1px solid #000;
	overflow:hidden;
}

#canvas
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height:300px;
}

3.JavaScript

base.js

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

var centerX;
var centerY;
var theCanvas;
var ctx;
var currentX0;
var currentY0;
var currentX1;
var currentY1;
var currentX2;
var currentY2;
var points = new Array();
var speed = 3;

function init()
{
	theCanvas = document.getElementById("contents");
	centerX = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).width;
	centerX = Number(centerX.replace('px',''));
	centerX =  centerX / 2;
	centerY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
	centerY = Number(centerY.replace('px',''));
	centerY =  35;
	
	theCanvas = document.getElementById("canvas");
	ctx =  theCanvas.getContext("2d");
	
	var x = Math.cos(18*Math.PI/180)*50*1.62;
	var y = Math.sin(18*Math.PI/180)*50*1.62;

	points.push({x:-(x/2),y:-y});
	points.push({x:x/2,y:0});
	points.push({x:-(x/2),y:y});
	
	set();	
}

function set()
{
	var degree = 1.5;
	var speed=3;
	
	function animation()
	{
		ctx.clearRect(0,0,300,300);
		
		var radian = degree*Math.PI/180;
		var vx = Math.cos(radian)*speed;
		var vy = Math.sin(radian)*speed;
	
		var i=0;
		var currentX0 = Math.cos(radian)*points[i].x-Math.sin(radian)*points[i].y;
		var currentY0 = Math.sin(radian)*points[i].x+Math.cos(radian)*points[i].y;
		currentX0 += vx;
		currentY0 += vy;
		points[i].x = currentX0;
		points[i].y = currentY0;
		
		i=1;
		var currentX1 = Math.cos(radian)*points[i].x-Math.sin(radian)*points[i].y;
		var currentY1 = Math.sin(radian)*points[i].x+Math.cos(radian)*points[i].y;
		currentX1 += vx;
		currentY1 += vy;
		points[i].x = currentX1;
		points[i].y = currentY1;
		
		i=2;
		var currentX2 = Math.cos(radian)*points[i].x-Math.sin(radian)*points[i].y;
		var currentY2 = Math.sin(radian)*points[i].x+Math.cos(radian)*points[i].y;
		currentX2 += vx;
		currentY2 += vy;
		points[i].x = currentX2;
		points[i].y = currentY2;
		
		draw(currentX0,currentY0,currentX1,currentY1,currentX2,currentY2);
		
	}
	setInterval(animation,1000/30);
}

function draw(currentX0,currentY0,currentX1,currentY1,currentX2,currentY2)
{
	ctx.strokeStyle="#000000";
	ctx.lineWidth=1;
	ctx.beginPath();
	ctx.moveTo(centerX+currentX0, centerY+currentY0);
	ctx.lineTo(centerX+currentX1, centerY+currentY1);
	ctx.lineTo(centerX+currentX2, centerY+currentY2);
	ctx.lineTo(centerX+currentX0, centerY+currentY0);
	ctx.stroke();
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントフィード

トラックバック URL : http://www.htmlcode.jp/%e5%86%86%e4%b8%8a%e3%82%92%e5%8b%95%e3%81%8f%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%ef%bd%9chtml5/trackback/