質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

576閲覧

canvas利用した背景アニメーションの色の表示不具合(Chromeのみ)

kaz33333

総合スコア2

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/06/01 13:43

実現したいこと

particles.js(https://marcbruederlin.github.io/particles.js/)を使用して、
幾何学模様が浮遊するアニメーションを制作しています。
オプションにて色を設定できるのですが、ここ数ヶ月以内からChrome(Edgeも)でのみ、
色の表現が変わってしまいました。Safari、firefoxでは正常に(意図した通り)表示されています。
※公式も同様の現象

  • 原因を特定したい
  • 他のブラウザ(Safari、firefox)と同様に表示できるようにしたい

前提

particles.js( https://marcbruederlin.github.io/particles.js/ )を使用しています。
Chromeでの見え方が突然変わってしまいました。

発生している問題・エラーメッセージ

エラーメッセージはありません

試したこと

jsのライブラリの401〜402に具体的にカラーコードを入れてみた
オプションの配列を単色にした
canvasを設置しているcontainerの背景を#000000にしてみたところ、指定した色のグラデーションで表示されているように見えた。背景が#000000以外の場合オブジェクトはほとんど黒に近い色で表示されているように見える

補足情報(FW/ツールのバージョンなど)

テストのcodepen
https://codepen.io/kaz333/pen/JjmQxgX

該当のソースコード

※ライブラリ部分は文字数の制限で記載できなかったので、上記codepenまたは下記公式よりご確認ください。
https://github.com/marcbruederlin/particles.js/blob/2cb1852c0a276cd694e0d03e810904dfd8bfac03/src/particles.js#L435

javascript

1window.onload = function() { 2 //perticle.js 3 Particles.init({ 4 selector: '.header__background', 5 color: ['#9F4367', '#9356A2', '#6B71AA', '#9FA6CF'], 6 maxParticles: 100, 7 connectParticles: true, 8 responsive: [ 9 { 10 breakpoint: 1024, 11 options: { 12 maxParticles: 80 13 } 14 }, { 15 breakpoint: 599, 16 options: { 17 maxParticles: 30 18 } 19 } 20 ] 21 }); 22 };

html

1<div class="perticle-wrap" style="background-color: #DFE0E1;"> 2 <canvas class="header__background"></canvas> 3</div>

どなたか、Chromeだけ表示のされ方が違う原因にお心当たりのある方、
また対応方法ご存じの方いらっしゃいましたらご教示いただけますよう宜しくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2023/06/01 14:52

Chrome のバグである可能性が極めて高いので、https://new.crbug.com/ よりバグレポートすべきでしょう。
kaz33333

2023/06/01 15:36

ご確認ありがとうございます。 取り急ぎ、https://new.crbug.com/ よりバグレポートしてみました。
guest

回答1

0

ベストアンサー

strokeStyleに加えて fillStyleも設定するととりあえず行けそうな気がします

javascript

1 _.context.strokeStyle = gradient; 2 _.context.fillStyle = gradient;

投稿2023/06/02 00:56

yambejp

総合スコア115523

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaz33333

2023/06/02 01:33

ありがとうございます。 fillStyleにgradientをあてたらグラデーションが再現できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問