2016/05/23
Canvasで波のアニメーションを描画する
ESPALMADOR MARISQUERIA｜エスパルマドール マリスケリア｜仙台
↑こちらのサイトの波のアニメーションが面白いと思ったので、
自分でもできないかと思って、方法を調べてみました。
こちらのサイトでは、Canvasで波をアニメーションさせているようでしたので、
Canvasで波のアニメーションを描画する方法を調べて、
そちらを基に再現してみました。
↓作ってみたDEMO
波の描画方法は、
↓こちらのサイトを参考にさせていただきました。
Canvas Sine Wave – JSFiddle
HTML5 canvas 試作 – その1 サインカーブ（波の表現）を描画してみました。【不定期連載】 | SAKUSAKU
方法
Canvasへの描画はlineTo()など、パスを使って行います。
波はSIN関数を使って描画します。
以下がコードです。
HTML
|
1 2 3 | <div id="canvas-container"> <canvas id="sineCanvas" width="800" height="300"></canvas> </div> |
JavaScaript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | (function () { var unit = 100, canvas, context, canvas2, context2, height, width, xAxis, yAxis, draw; /** * Init function. * * Initialize variables and begin the animation. */ function init() { canvas = document.getElementById("sineCanvas"); canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる canvas.height = 300; context = canvas.getContext("2d"); height = canvas.height; width = canvas.width; xAxis = Math.floor(height/2); yAxis = 0; draw(); } /** * Draw animation function. * * This function draws one frame of the animation, waits 20ms, and then calls * itself again. */ function draw() { // キャンバスの描画をクリア context.clearRect(0, 0, width, height); //波を描画 drawWave('#10c2cd', 1, 3, 0); // Update the time and draw again draw.seconds = draw.seconds + .009; draw.t = draw.seconds*Math.PI; setTimeout(draw, 35); }; draw.seconds = 0; draw.t = 0; /** * 波を描画 * drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ) */ function drawWave(color, alpha, zoom, delay) { context.fillStyle = color; context.globalAlpha = alpha; context.beginPath(); //パスの開始 drawSine(draw.t / 0.5, zoom, delay); context.lineTo(width + 10, height); //パスをCanvasの右下へ context.lineTo(0, height); //パスをCanvasの左下へ context.closePath() //パスを閉じる context.fill(); //塗りつぶす } /** * Function to draw sine * * The sine curve is drawn in 10px segments starting at the origin. * drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ) */ function drawSine(t, zoom, delay) { // Set the initial x and y, starting at 0,0 and translating to the origin on // the canvas. var x = t; //時間を横の位置とする var y = Math.sin(x)/zoom; context.moveTo(yAxis, unit*y+xAxis); //スタート位置にパスを置く // Loop to draw segments (横幅の分、波を描画) for (i = yAxis; i <= width + 10; i += 10) { x = t+(-yAxis+i)/unit/zoom; y = Math.sin(x - delay)/3; context.lineTo(i, unit*y+xAxis); } } init(); })(); |
複数の波を重ねて表示することなどもできますので、
応用次第でかなり表現の幅が広がるのではないかと思いました。
Author Profile
SHARE
