Q&A
下記のコードでウニョウニョ動かしていますがどうしたらブラー効果をかけることができますでしょうか？
<html lang="en"> <head> <meta charset="UTF-8"> <title>canvass bular test</title> <style> * { box-sizing: border-box !important; padding: 0; margin: 0; } #canvasAreaWrap { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; overflow: hidden; z-index: -1; } #canvasArea { height: 100% !important; width: 100% !important; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } #canvas { touch-action: none; cursor: inherit; height: 100% !important; width: 100% !important; /*-ms-filter: blur(35px); filter: blur(35px);*/ } </style> </head> <body> <div id="canvasAreaWrap"> <div id="canvasArea"> <canvas id="canvas" width="100%" height="100%"></canvas> </div> </div> <!--HTML--> <script> (function () { const MAX = 10, circles = [ { center: { x: 300, y: 1000 }, color: '#4ae932', radius: 600, point: [], shadowColor: '#4ae932' }, { center: { x: 600, y: 1100 }, color: '#47c9c9', radius: 450, point: [], shadowColor: '#47c9c9' }, { center: { x: 1300, y: 1000 }, color: '#32e977', radius: 1000, point: [], shadowColor: '#32e977' } ]; let canvas, context; let Point = function (c, r, rota) { this.x, this.y; this.centerX = c.x; this.centerY = c.y; this.radian = rota * (Math.PI / 180); this.radius = r; this.speed = Math.random() * 2 + 2; this.r = Math.random() * 25 + 1; this.rota = 0; this.update = function () { var plus = Math.cos(this.rota * (Math.PI / 180)) * this.r; this.radius += plus; var cos = Math.cos(this.radian) * this.radius; var sin = Math.sin(this.radian) * this.radius; this.x = cos + this.centerX; this.y = sin + this.centerY; this.rota += this.speed; if (this.rota > 360) { this.rota -= 360; }; } } const init = function () { var rota = Math.floor(360 / MAX); for (var i = 0; i < circles.length; i++) { for (var j = 0; j < MAX; j++) { circles[i].point[j] = new Point(circles[i]['center'], circles[i]['radius'], rota * j); } } update(); } const update = function () { for (var i = 0; i < circles.length; i++) { for (var j = 0; j < MAX; j++) { circles[i].point[j].update(); } } draw(circles); setTimeout(update, 45); } const draw = function (circles) { context.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < circles.length; i++) { drawCircle(circles[i]['color'], circles[i]['point'], 0.35 , circles[i]['shadowColor']); } }; const drawCircle = function (color, point, alpha, shadowColor) { context.fillStyle = color; context.globalAlpha = alpha; context.shadowColor = shadowColor; context.beginPath(); var xc1 = (point[0].x + point[MAX - 1].x) / 2; var yc1 = (point[0].y + point[MAX - 1].y) / 2; context.moveTo(xc1, yc1); for (var i = 0; i < MAX - 1; i++) { context.shadowBlur = 30; context.shadowOffsetX = -10; context.shadowOffsetY = -10; context.globalCompositeOperation = 'lighter';//ブレンドモード//lighter//xor var xc = (point[i].x + point[i + 1].x) / 2; var yc = (point[i].y + point[i + 1].y) / 2; context.quadraticCurveTo(point[i].x, point[i].y, xc, yc); } context.quadraticCurveTo(point[i].x, point[i].y, xc1, yc1); context.closePath(); context.fill(); } window.onload = function (e) { canvas = document.getElementById("canvas"); canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; context = canvas.getContext("2d"); init(); } })(); </script> <!--script--> <p style="margin:0 auto; width:70%; padding:150px 0;"> 「ではみなさんは、そういうふうに川だと<ruby> <rb>云</rb> <rp>（</rp> <rt>い</rt> <rp>）</rp> </ruby>われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に<ruby> <rb>吊</rb> <rp>（</rp> <rt>つる</rt> <rp>）</rp> </ruby>した大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを<ruby> <rb>指</rb> <rp>（</rp> <rt>さ</rt> <rp>）</rp> </ruby>しながら、みんなに<ruby> <rb>問</rb> <rp>（</rp> <rt>とい</rt> <rp>）</rp> </ruby>をかけました。<br /> カムパネルラが手をあげました。それから四五人手をあげました。ジョバンニも手をあげようとして、急いでそのままやめました。たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはまるで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどんなこともよくわからないという気持ちがするのでした。<br /> ところが先生は早くもそれを<ruby> <rb>見附</rb> <rp>（</rp> <rt>みつ</rt> <rp>）</rp> </ruby>けたのでした。<br /> 「ジョバンニさん。あなたはわかっているのでしょう。」<br /> ジョバンニは<ruby> <rb>勢</rb> <rp>（</rp> <rt>いきおい</rt> <rp>）</rp> </ruby>よく立ちあがりましたが、立って見るともうはっきりとそれを答えることができないのでした。ザネリが前の席からふりかえって、ジョバンニを見てくすっとわらいました。ジョバンニはもうどぎまぎしてまっ赤になってしまいました。先生がまた云いました。<br /> 「大きな望遠鏡で銀河をよっく調べると銀河は大体何でしょう。」<br /> やっぱり星だとジョバンニは思いましたがこんどもすぐに答えることができませんでした。<br /> 先生はしばらく困ったようすでしたが、<ruby> <rb>眼</rb> <rp>（</rp> <rt>め</rt> <rp>）</rp> </ruby>をカムパネルラの方へ向けて、<br /> 「ではカムパネルラさん。」と名指しました。するとあんなに元気に手をあげたカムパネルラが、やはりもじもじ立ち上ったままやはり答えができませんでした。<br /> 先生は意外なようにしばらくじっとカムパネルラを見ていましたが、急いで「では。よし。」と云いながら、自分で星図を<ruby> <rb>指</rb> <rp>（</rp> <rt>さ</rt> <rp>）</rp> </ruby>しました。<br /> 「このぼんやりと白い銀河を大きないい望遠鏡で見ますと、もうたくさんの小さな星に見えるのです。ジョバンニさんそうでしょう。」<br /> ジョバンニはまっ赤になってうなずきました。けれどもいつかジョバンニの眼のなかには<ruby> <rb>涙</rb> <rp>（</rp> <rt>なみだ</rt> <rp>）</rp> </ruby>がいっぱいになりました。そうだ<ruby> <rb>僕</rb> <rp>（</rp> <rt>ぼく</rt> <rp>）</rp> </ruby>は知っていたのだ、<ruby> <rb>勿論</rb> <rp>（</rp> <rt>もちろん</rt> <rp>）</rp> </ruby>カムパネルラも知っている、それはいつかカムパネルラのお父さんの博士のうちでカムパネルラといっしょに読んだ雑誌のなかにあったのだ。それどこでなくカムパネルラは、その雑誌を読むと、すぐお父さんの<ruby> <rb>書斎</rb> <rp>（</rp> <rt>しょさい</rt> <rp>）</rp> </ruby>から<ruby> <rb>巨</rb> <rp>（</rp> <rt>おお</rt> <rp>）</rp> </ruby>きな本をもってきて、ぎんがというところをひろげ、まっ黒な<ruby> <rb>頁</rb> <rp>（</rp> <rt>ページ</rt> <rp>）</rp> </ruby>いっぱいに白い点々のある美しい写真を二人でいつまでも見たのでした。それをカムパネルラが忘れる<ruby> <rb>筈</rb> <rp>（</rp> <rt>はず</rt> <rp>）</rp> </ruby>もなかったのに、すぐに返事をしなかったのは、このごろぼくが、朝にも午后にも仕事がつらく、学校に出てももうみんなともはきはき遊ばず、カムパネルラともあんまり物を云わないようになったので、カムパネルラがそれを知って気の毒がってわざと返事をしなかったのだ、そう考えるとたまらないほど、じぶんもカムパネルラもあわれなような気がするのでした。<br /> 先生はまた云いました。<br /> 「ですからもしもこの<ruby> <rb>天</rb> <rp>（</rp> <rt>あま</rt> <rp>）</rp> </ruby>の<ruby> <rb>川</rb> <rp>（</rp> <rt>がわ</rt> <rp>）</rp> </ruby>がほんとうに川だと考えるなら、その一つ一つの小さな星はみんなその川のそこの砂や<ruby> <rb>砂利</rb> <rp>（</rp> <rt>じゃり</rt> <rp>）</rp> </ruby>の<ruby> <rb>粒</rb> <rp>（</rp> <rt>つぶ</rt> <rp>）</rp> </ruby>にもあたるわけです。またこれを巨きな乳の流れと考えるならもっと天の川とよく似ています。つまりその星はみな、乳のなかにまるで細かにうかんでいる<ruby> <rb>脂油</rb> <rp>（</rp> <rt>しゆ</rt> <rp>）</rp> </ruby>の球にもあたるのです。そんなら何がその川の水にあたるかと云いますと、それは真空という光をある速さで伝えるもので、太陽や地球もやっぱりそのなかに<ruby> <rb>浮</rb> <rp>（</rp> <rt>うか</rt> <rp>）</rp> </ruby>んでいるのです。つまりは私どもも天の川の水のなかに<ruby> <rb>棲</rb> <rp>（</rp> <rt>す</rt> <rp>）</rp> </ruby>んでいるわけです。そしてその天の川の水のなかから四方を見ると、ちょうど水が深いほど青く見えるように、天の川の底の深く遠いところほど星がたくさん集って見えしたがって白くぼんやり見えるのです。この模型をごらんなさい。」<br /> 先生は中にたくさん光る砂のつぶの入った大きな両面の<ruby> <rb>凸</rb> <rp>（</rp> <rt>とつ</rt> <rp>）</rp> </ruby>レンズを指しました。<br /> 「天の川の形はちょうどこんななのです。このいちいちの光るつぶがみんな私どもの太陽と同じようにじぶんで光っている星だと考えます。私どもの太陽がこのほぼ中ごろにあって地球がそのすぐ近くにあるとします。みなさんは夜にこのまん中に立ってこのレンズの中を見まわすとしてごらんなさい。こっちの方はレンズが<ruby> <rb>薄</rb> <rp>（</rp> <rt>うす</rt> <rp>）</rp> </ruby>いのでわずかの光る粒<ruby> <rb>即</rb> <rp>（</rp> <rt>すなわ</rt> <rp>）</rp> </ruby>ち星しか見えないのでしょう。こっちやこっちの方はガラスが厚いので、光る粒即ち星がたくさん見えその遠いのはぼうっと白く見えるというこれがつまり今日の銀河の説なのです。そんならこのレンズの大きさがどれ位あるかまたその中のさまざまの星についてはもう時間ですからこの次の理科の時間にお話します。では今日はその銀河のお祭なのですからみなさんは外へでてよくそらをごらんなさい。ではここまでです。本やノートをおしまいなさい。」<br /> そして教室中はしばらく<ruby> <rb>机</rb> <rp>（</rp> <rt>つくえ</rt> <rp>）</rp> </ruby>の<ruby> <rb>蓋</rb> <rp>（</rp> <rt>ふた</rt> <rp>）</rp> </ruby>をあけたりしめたり本を重ねたりする音がいっぱいでしたがまもなくみんなはきちんと立って礼をすると教室を出ました。<br /> <br /> </p> <!--HTML--> </body> </html> コード
回答1件
0
その CSS のコメントアウトされた部分 /* filter: blur(35px); */ を外したらフィルター適用されないでしょうか？
下記環境試したところ、動作していそうです。
・Windows 10 + Chrome
・iPad + Safari
css
1#canvas { 2 touch-action: none; 3 cursor: inherit; 4 height: 100% !important; 5 width: 100% !important; 6 filter: blur(35px); 7}
■ filter 適用前]
https://jsfiddle.net/cx20/5tz40L7h/
■ filter 適用後
https://jsfiddle.net/cx20/w3gv1sqr/
＜参考＞
■ Canvasの画像をぼかしたい
https://teratail.com/questions/244567
投稿2021/10/17 23:30
編集2021/10/17 23:54
総合スコア4633
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/18 01:35 編集
2021/10/18 03:18
2021/10/18 12:59
2021/10/18 13:01
2021/10/18 13:31
2021/10/18 13:36
2021/10/18 13:51
2021/10/19 01:46