Matter.jsを使ったcanvasで描画した円をクリックしたらリンクに飛ぶようにし、canvasの背景を透過したい。

今あるサイトのトップページを作っているのですが、Matter.jsを使ったcanvasで描画した円をクリックしたら別ページのリンクに飛ぶようなものを実装したいのですが、どうすれば良いかわかりません。。。。
こんなイメージです！
[

かつ、canvasの背景を透過させ、円のみ見えるようにするにはどうすれば良いでしょうか？
cssでcanvasのbackground-color: transparent;をやってもそのcssが効いてくれず、困っています。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <link rel="stylesheet" href="style.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8
9    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js"></script>
10    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,minimal-ui">
11    <title>test</title>
12
13</head>
14
15<body>
16<img src="./stand1.gif" class="icon">
17    <canvas id="space"></canvas>//このcanvasの背景を透過して下にあるstand1.gifが見えるようにしたい!!!!!!!!!
18   
19　　 <script type="text/javascript">
20        var Engine = Matter.Engine,
21            Render = Matter.Render,
22            Runner = Matter.Runner,
23            World = Matter.World,
24            Bodies = Matter.Bodies;
25
26        // create engine
27        var engine = Engine.create(),
28            world = engine.world; 
29
30
31    
32        var winWidth = screen.width;
33        var winHeight = screen.height;
34
35        // レンダリング対象のキャンバス
36        var canvas = document.getElementById('space');
37
38        var MouseConstraint = Matter.MouseConstraint,
39            Mouse = Matter.Mouse;
40        
41        // create renderer
42        var render = Render.create({ 
43            element: document.body,
44            canvas: canvas,
45            engine: engine,
46            options: {
47                width: winWidth, 
48                height: winHeight, 
49                wireframes: false, 
50                showAngleIndicator: false           
51            }
52        });
53
54        var mouse = Mouse.create(render.canvas),
55            mouseConstraint = MouseConstraint.create(engine, {
56                mouse: mouse,
57                constraint: {
58                    stiffness: 0.2,
59                    render: {
60                        visible: false
61                    }
62                }
63            });
64        World.add(world, mouseConstraint);
65
66        // keep the mouse in sync with rendering
67        render.mouse = mouse;
68
69
70
71        Render.run(render); 
72
73        // create runner
74        var runner = Runner.create();
75        Runner.run(runner, engine); 
76
77
78        //円のオブジェクト作成。これをクリックしたら別ページに飛びたい。。。。。。。。。。
79
80        var maru = Bodies.circle(300, 0, 44, {
81            restitution: 1,
82            render: {
83                fillStyle: '#F08E8F', //中身の色
84                strokeStyle: '#007FFF', //線の色
85                lineWidth: 5, //線の太さ
86                sprite: { //スプライトの設定
87                    texture: 'twitter.png', //テクスチャ画像を指定
88                    xScale: 0.1,
89                    yScale: 0.1
90                }
91
92            }
93        });
94
95        var maru2 = Bodies.circle(300, 0, 50, {
96            restitution: 1,
97            render: {
98                fillStyle: '#F08E8F', //中身の色
99                strokeStyle: '#007FFF', //線の色
100                lineWidth: 5, //線の太さ
101
102            }
103        });
104
105        var yuka = Bodies.rectangle(400, 350, 2000, 30, {
106            isStatic: true
107        });
108
109
110        World.add(world, [ 
111            maru,
112            yuka,
113            maru2
114        ]);
115    </script>
116
117</body>
118
119</html>

css
1
2
3
4.icon{
5    position: absolute;
6
7}
8
9canvas{
10    position:absolute;
11    background-color:transparent;
12/*    こいつが効かない。なんで......?*/
13
14}
15
16

yambejp

2020/03/12 08:22

svgとかではダメですかね？

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

回答1件

ベストアンサー

ドキュメントを読むと background オプションがあるのでこれを指定します。

JavaScript
1            options: {
2                width: winWidth, 
3                height: winHeight, 
4                wireframes: false, 
5                showAngleIndicator: false,
6                background: 'transparent'
7            }

https://github.com/liabru/matter-js/wiki/Rendering#options

投稿2020/03/12 08:25

x_x

総合スコア13749

okomekei02

2020/03/12 08:35

ありがとうございます！とても助かりました！こんなに簡単なことだったんですね。。気をつけます。。笑ちなみに円をクリックしたらリンクに飛ぶ方法などはわかりますでしょうか？

x_x

2020/03/12 09:07

mousedown 時でよければ次のようにしてできるようです。 Matter.Events.on(mouseConstraint, 'mousedown', function(event) { if (event.source.body === maru) { location.href = 'https://www.google.co.jp/'; } }); https://brm.io/matter-js/docs/classes/MouseConstraint.html

okomekei02

2020/03/12 16:47

ありがとうございます！本当に助かりました！

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