重ねたJavaScriptの下部だけ「ぼかし」を入れる

実現したいこと

1）アナログ時計（time.js）に「ぼかし」を入れる。この動画は連続秒針のように滑らかに回転させる。
2）デジタル時計（processing.js）には「ぼかし」を入れない。
3）canvasを使用しない別の方法があれば知りたい。

ご教授のほど、よろしくお願いいたします。

発生している問題・分からないこと

canvasで設定ができない

body{position: relative;background-color: black;z-index:0;overflow: hidden;}
canvas#ana{filter:blur(10px);position: absolute;z-index:1;}
canvas#pjs{filter:blur(0);position: absolute;z-index:2;}

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
6<script src="processing.js"></script>
7
8<style>
9body{position: relative;background-color: black;z-index:0;overflow: hidden;}
10canvas#ana{filter:blur(10px);position: absolute;z-index:1;}
11canvas#pjs{filter:blur(0);position: absolute;z-index:2;}
12</style>
13
14<head>
15
16
17<body marginheight="0" marginwidth="0">
18
19<canvas id="ana"><script src="time.js"></script></canvas>
20
21<canvas id="pjs">
22<script type="application/processing" data-processing-target="pjs" >
23/* @pjs font="Anton-Regular.ttf"; */
24
25float cx, cy;
26PFont  pFontData;
27
28class ClockMillis{
29      ClockMillis() {
30        previous_second = second();
31        timestamp = millis();
32      }
33
34      int get() {
35        if ( second() != previous_second ) {
36          previous_second = second();
37          timestamp = millis();
38        }
39        return (millis()-timestamp);
40      }
41      int previous_second;
42      int timestamp;
43}
44
45ClockMillis clock_millis;
46    void setup() {
47      size(innerWidth,innerHeight);//★画面サイズに合わせる
48      textAlign(CENTER);
49      clock_millis = new ClockMillis();
50      pFontData = loadFont("Anton-Regular.ttf");//★文字データ
51      textFont(pFontData);//★文字データ
52      imageMode(CENTER);
53      cx = width/2;　// ★画面中央の座標
54      cy = height/2; // ★画面中央の座標
55    }
56
57    void draw(){
58      background(color,alpha);
59      textSize(20);
60      text(nf(year(), 4)+nf(month(), 2)+nf(day(), 2)+nf(hour(), 2)+nf(minute(), 2)+nf(second(), 2)+nf(clock_millis.get(),3), width/2, height/2+10) ;
61      fill(0);
62      }
63</script>
64</canvas>
65
66</body>
67</html>

time.js
1const circleSize = 640;
2
3function setup() {
4  createCanvas(windowWidth, windowHeight);
5  background(0);
6  noStroke();
7}
8
9function draw() {
10  translate(width/2, height/2);
11  rotate(-HALF_PI);
12  
13  blendMode(BLEND);
14  background(0);
15  blendMode(DIFFERENCE);
16  fill(255);
17  showTime();
18}
19
20function showTime() {
21  let d = new Date();
22  let hours = d.getHours();
23  let minutes = d.getMinutes();
24  let seconds = d.getSeconds();
25  let milliseconds = d.getMilliseconds();
26  //print(hours + ":" + minutes + ":" + seconds + "." + milliseconds);
27
28  let s = seconds + (milliseconds / 1000);
29  let m = minutes + (s / 60);
30  let h = hours + (m / 60);
31
32  push();
33  fill(0, 0, 255);
34  rotate(h / 12 * TWO_PI);
35  circle(width/5, 0, circleSize);
36  pop();
37
38  push();
39  fill(255, 0, 0);
40  rotate(m / 60 * TWO_PI);
41  circle(width/5, 0, circleSize);
42  pop();
43
44  push();
45  fill(0, 255, 0);
46  rotate(s / 60 * TWO_PI);
47  circle(width/5, 0, circleSize);
48  pop();
49}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

２つのJavaScriptを重ね、下部のJavaScriptにはcanvas{filter:blur(10px);}を使用、上部のJavaScriptにはcanvas{filter:blur(0);}を使用しても、下部のJavaScriptにだけ「ぼかし」が設定できない。

補足

processing.jsは下記のダウンロードページから可能です。
「Download Processing.js v1.6.0」
https://raw.githubusercontent.com/processing-js/processing-js/v1.6.0/processing.js

yambejp

2025/08/26 00:09

processingのコードが記載されていない(？)ようですが

noutore

2025/08/26 00:34

yambejpさまコメントありがとうございます。 processingのソースコードはHTML内に直接記載しています。これ以外に外付けでprocessing.js（processingのプログラム本体？）がありますが、文字数が多いためこのページに書けません。（回答になっておりますか？）よろしくお願いいたします。

yambejp

2025/08/26 00:49

>processingのソースコードはHTML内に直接記載しています。 >文字数が多いためこのページに書けません。なるほど、ただ動作確認できないのでご希望される挙動についても助言できませんが、どこか挙動するソースをアップできませんか？

noutore

2025/08/26 01:01

yambejpさまコメントありがとうございます。 processing.jsは公開されているプログラム？だったと思うので探してみます。

noutore

2025/08/26 01:15

yambejpさまありがとうございます。 processing.jsの「Download Processing.js v1.6.0」を探しました。 https://raw.githubusercontent.com/processing-js/processing-js/v1.6.0/processing.js これだと良いのですが。よろしくお願いいたします。

行動規範の内容に同意します

回答2件

canvas#anaに三原色スポットライトみたいなアニメーションが描画されることを期待しているのだと思います。

しかし、p5.jsはbody末尾のcanvasを生成するらしいので、アドホックですが:nth-last-child(1 of canvas){filter:blur(10px);position: absolute;z-index:1;}とするととりあえずいいのかもしれません。

もう少しきちんと書くならば、canvasの生成場所を指定してあげるといいかと思います。
参考：https://p5js.org/reference/p5/createCanvas/

投稿2025/08/26 01:02

編集2025/08/26 01:05

Lhankor_Mhy

総合スコア37579

noutore

2025/08/26 01:37

Lhankor_Mhyさま回答いただきまして、ありがとうございます。「アドホック」から調べてみます。

Lhankor_Mhy

2025/08/26 01:47

「アドホック」というのは、「弥縫策」とか「暫定的な」とか「取り急ぎ」とか、そういう意味です。本質的な解決策ではない、という意味で使っています。

noutore

2025/08/26 09:44

Lhankor_Mhyさまコメントありがとうございます。まだJavaScriptを始めて5年なので、プログラムの専門用語だと勘違いしました。

Lhankor_Mhy

2025/08/26 10:02

ITシステムなどでも使われる言葉なので紛らわしかったですね、すみません。ご不明の点があればコメント欄でお知らせください。

noutore

2025/08/26 10:43

Lhankor_Mhyさまこんばんは cssにnth-last-childを設定しましたが変化はありませんでした。下記のcssの記述が間違っているのでしょうか。 <style> body{position: relative;background-color: black;z-index:0;overflow: hidden;} canvas#ana:nth-last-child(1 of canvas){filter:blur(10px);position: absolute;z-index:1;} canvas#pjs{filter:blur(0);position: absolute;z-index:2;} </style>

Lhankor_Mhy

2025/08/26 23:53

そうですね、 canvas#ana:nth-last-child(1 of canvas){filter:blur(10px);position: absolute;z-index:1;} とアレンジするのではなくて、回答に書いてあるコードをそのまま使ってみてはどうでしょうか。

行動規範の内容に同意します