サイン波を描く｜HTML5（HTML5, JavaScript, CSS3） : デモ
サイン波を描く｜HTML5（HTML5, JavaScript, CSS3） : ZIPファイル（2kb）
1.HTML
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8" />
<title>サイン波を描く｜Draw sin curve</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);
function init()
{
var theCanvas = document.getElementById("canvas");
var offsetX = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).width;
offsetX = Number(offsetX.replace('px',''));
offsetX = offsetX / 2;
var offsetY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
offsetY = Number(offsetY.replace('px',''));
offsetY = offsetY / 2;
var ctx = theCanvas.getContext("2d");
var radian = 0;
var range = 100;
var xspeed = 0.79;
var yspeed = 0.05;
var centerY = 150;
var xpos = 0;
var ypos = 0;
draw();
function animation()
{
ctx.clearRect(0,0,300,300);
if(xpos>300)
{
ctx.closePath();
ctx.clearRect(0,0,300,300);
draw();
xpos=0;
radian=0;
ctx.moveTo(0, centerY);
}
xpos += xspeed;
radian += yspeed;
ypos = centerY + Math.sin(radian)*range;
ctx.lineTo(xpos, ypos);
ctx.stroke();
}
var _animation = setInterval(animation,1000/60);
function draw()
{
ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, centerY);
}
}