サイン波を描く|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); } }