ソースを貼り付ける場合は、「コードの挿入 (Qiita公式ヘルプ)」をお使いください。
特に、htmlのタグは、そうしないと見えなくなってしまいます。
既に投稿した質問でも、再度編集して書き替えることができます。
記事の右上辺りに「編集する」リンクがあると思います。
Like!
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
2Answer
0
下記のように仮定して再現してみたところ、白地に青緑の波形のアニメが表示できました。
しかし、動画のような水平ラインは再現されませんでした。(Google Chrome、MS Edgeで確認)
何か別の要素が上に被っている可能性はないでしょうか?
<html>
<head>
<script>
function wave () {
var unit = 100, canvas, context, canvas2, context2, height, width, xAxis, yAxis, draw;
function init() {
canvas = document.getElementById("sineCanvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = 300;
context = canvas.getContext("2d");
height = canvas.height;
width = canvas.width;
xAxis = Math.floor(height / 2);
yAxis = 0;
draw();
}
function draw() {
context.clearRect(0, 0, width, height);
drawWave('#10c2cd', 1, 3, 0);
draw.seconds = draw.seconds + .009;
draw.t = draw.seconds * Math.PI;
setTimeout(draw, 35);
}
draw.seconds = 0;
draw.t = 0;
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);
context.lineTo(0, height);
context.closePath()
context.fill();
}
function drawSine(t, zoom, delay) {
var x = t;
var y = Math.sin(x) / zoom;
context.moveTo(yAxis, unit * y + xAxis);
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>
</head>
<body>
<canvas id="sineCanvas"></canvas>
<script>wave();</script>
</body>
</html>
Like!
Comments
@hiro1086
Questioner回答ありがとうございます！
実はBASEというネットショップを開設できるサイトでカスタマイズしているので結構要素は被ってます、、
該当していそうな箇所を追加で編集するのでよかったらもう一度確認していただくことは可能でしょうか。。- 更新されたコードをそのまま再生してみたところ、波形のアニメが表示できましたが、水平ラインは再現されませんでした。
内容も拝見しましたが、サイトに依存しているようで、環境がないと検証は難しそうです。
お力になれず申し訳ありません。 @hiro1086
Questionerやはりサイトに依存していますよね、、
とんでもないです！
お手数をおかけしました！ありがとうございます！