canvasを使用してアニメーションの波線を入れた
canvasを使用してアニメーションの波線を入れましたが、下部にある白色の波線が消えません。
見づらいですが、ご教授願えますか。
実際の動き:https://gyazo.com/6da0dec78af1b1c7d9d1905b4638f948
参考URL：https://pixeliste.jp/code/canvas-2
【目的】
波線アニメーション下部にある白線を消す、もしくは波と同一の色にしたい。
【検証】
・HTMLのdiv要素の背景色を変えた
・jsのcolorを変更した
結果として両者とも白線は消えませんでした。
jsの波線の起点を指定変更する必要があるのでしょうか、、
<html>
<head>
<body>
<!-- fetureArea -->
<section class="fetureArea secArea clearfix">
<div style="background: -moz-linear-gradient(top, #FAF0E6, #FFF);
background: -webkit-linear-gradient(top, #FAF0E6, #FFF);
background: linear-gradient(to bottom, #FAF0E6, #FFF);", class="fetureAreaInner clearfix">
<h2 class="secTitle fadeinup">
<span class="secTitleEn {select:Fonts_en}">{block:text-featAreaTitle}{text:featAreaTitle}{/block:text-featAreaTitle}</span>
<span class="secTitleJp {select:Fonts_jp}">{block:text-featAreaSubTitle}{text:featAreaSubTitle}{/block:text-featAreaSubTitle}</span>
</h2>
<div class="listFeature clearfix">
<ul>
{block:if-feature1}
<li class="clearfix fadeinup">
<div class="col-right col-img">
<div class="listImg"><img src="{image:feat1img}"></div>
</div>
<div class="col-left col-txt">
<span class="f-num {select:Fonts_en}">01</span>
<h3 class="{select:Fonts_jp} subHead">{block:text-feat1Title}{text:feat1Title}{/block:text-feat1Title}</h3>
<span class="{select:Fonts_en} subHeadEn">{block:text-feat1SubTitle}{text:feat1SubTitle}{/block:text-feat1SubTitle}</span>
<div class="{select:Fonts_jp} subDesc">{block:text-feat1Desc}{text:feat1Desc}{/block:text-feat1Desc}</div>
</div>
</li>
{/block:if-feature1}
{block:not_if-feature1}
<div class="hide">特徴1を非表示</div>
{/block:not_if-feature1}
{block:if-feature2}
<li class="clearfix fadeinup">
<div class="col-left col-img">
<div class="listImg"><img src="{image:feat2img}"></div>
</div>
<div class="col-right col-txt">
<span class="f-num {select:Fonts_en}">02</span>
<h3 class="{select:Fonts_jp} subHead">{block:text-feat2Title}{text:feat2Title}{/block:text-feat2Title}</h3>
<span class="{select:Fonts_en} subHeadEn">{block:text-feat2SubTitle}{text:feat2SubTitle}{/block:text-feat2SubTitle}</span>
<div class="{select:Fonts_jp} subDesc">{block:text-feat2Desc}{text:feat2Desc}{/block:text-feat2Desc}</div>
</div>
</li>
{/block:if-feature2}
{block:not_if-feature2}
<div class="hide">特徴2を非表示</div>
{/block:not_if-feature2}
{block:if-feature3}
<li class="clearfix fadeinup">
<div class="col-right col-img">
<div class="listImg"><img src="{image:feat3img}"></div>
</div>
<div class="col-left col-txt">
<span class="f-num {select:Fonts_en}">03</span>
<h3 class="{select:Fonts_jp} subHead">{block:text-feat3Title}{text:feat3Title}{/block:text-feat3Title}</h3>
<span class="{select:Fonts_en} subHeadEn">{block:text-feat3SubTitle}{text:feat3SubTitle}{/block:text-feat3SubTitle}</span>
<div class="{select:Fonts_jp} subDesc">{block:text-feat3Desc}{text:feat3Desc}{/block:text-feat3Desc}</div>
</div>
</li>
{/block:if-feature3}
{block:not_if-feature3}
<div class="hide">特徴3を非表示</div>
{/block:not_if-feature3}
</ul>
<div id="canvas-container">
<canvas id="sineCanvas" width="500" height="100"></canvas>
<script>
(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 = 100;
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 + .003;
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 = "#faf0e6";
context.globalAlpha = alpha;
context.beginPath(); //パスの開始
drawSine(draw.t / 0.3, 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();
})();
</script>
</div>
</div>
</div>
</section>
0
