JavaScriptで波のアニメーションを作ろうと思っています。
ネットでコードを検索し、下記のコードを書き変えているのですが、波の色の変更方法がわかりません。
自分なりにコードを解読し、JavaScriptコードの下の方のcontext.fillStyle = color;を変更すればいいのだと思ったのですが、ネットで検索して色々書き変えても正しく表示されません。#F9F6E5 の色コードに変更したいと思っています。
素人質問で申し訳ないです。どなたかよろしくお願いします。
html
1<div id="canvas-container"> 2 <canvas id="sineCanvas" width="800" height="300"></canvas> 3</div>
JavaScript
1(function () { 2 3var unit = 100, 4 canvas, context, canvas2, context2, 5 height, width, xAxis, yAxis, 6 draw; 7 8/** 9 * Init function. 10 * 11 * Initialize variables and begin the animation. 12 */ 13function init() { 14 15 canvas = document.getElementById("sineCanvas"); 16 17 canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる 18 canvas.height = 300; 19 20 context = canvas.getContext("2d"); 21 22 height = canvas.height; 23 width = canvas.width; 24 25 xAxis = Math.floor(height/2); 26 yAxis = 0; 27 28 draw(); 29} 30 31/** 32 * Draw animation function. 33 * 34 * This function draws one frame of the animation, waits 20ms, and then calls 35 * itself again. 36 */ 37function draw() { 38 39 // キャンバスの描画をクリア 40 context.clearRect(0, 0, width, height); 41 42 //波を描画 43 drawWave('#10c2cd', 1, 3, 0); 44 45 // Update the time and draw again 46 draw.seconds = draw.seconds + .009; 47 draw.t = draw.seconds*Math.PI; 48 setTimeout(draw, 35); 49}; 50draw.seconds = 0; 51draw.t = 0; 52 53/** 54* 波を描画 55* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ) 56*/ 57function drawWave(color, alpha, zoom, delay) { 58 context.fillStyle = color; 59 context.globalAlpha = alpha; 60 61 context.beginPath(); //パスの開始 62 drawSine(draw.t / 0.5, zoom, delay); 63 context.lineTo(width + 10, height); //パスをCanvasの右下へ 64 context.lineTo(0, height); //パスをCanvasの左下へ 65 context.closePath() //パスを閉じる 66 context.fill(); //塗りつぶす 67} 68 69/** 70 * Function to draw sine 71 * 72 * The sine curve is drawn in 10px segments starting at the origin. 73 * drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ) 74 */ 75function drawSine(t, zoom, delay) { 76 77 // Set the initial x and y, starting at 0,0 and translating to the origin on 78 // the canvas. 79 var x = t; //時間を横の位置とする 80 var y = Math.sin(x)/zoom; 81 context.moveTo(yAxis, unit*y+xAxis); //スタート位置にパスを置く 82 83 // Loop to draw segments (横幅の分、波を描画) 84 for (i = yAxis; i <= width + 10; i += 10) { 85 x = t+(-yAxis+i)/unit/zoom; 86 y = Math.sin(x - delay)/3; 87 context.lineTo(i, unit*y+xAxis); 88 } 89} 90 91init(); 92 93})();
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。