teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問canvasを背景にする方法

編集履歴

質問編集履歴

1

少し改変しました。

2017/12/07 15:27

投稿

homel15k
homel15k

スコア19

test CHANGED
File without changes
test CHANGED
@@ -10,23 +10,11 @@
10
10
 
11
11
  ```HTML
12
12
 
13
- <!DOCTYPE HTML>
14
-
15
- <meta charset="UTF-8">
16
-
17
- <html>
18
-
19
- <head>
20
-
21
- <title>Rmoon</title>
22
-
23
- <script>
24
-
25
13
  window.onload = function(){
26
14
 
27
- const cvsw = 800; // canvasタグに指定したwidth
15
+ const cvsw = 1500; // canvasタグに指定したwidth
28
16
 
29
- const cvsh = 900;
17
+ const cvsh = 800;
30
18
 
31
19
  const imgsize = 125; // canvasタグに指定したheight
32
20
 
@@ -50,7 +38,9 @@
50
38
 
51
39
  image.onload = setInterval(function(){
52
40
 
53
- if(image.y >= cvs-imgsize) return;
41
+ if(image.y >= 800-120)
42
+
43
+ return;
54
44
 
55
45
  if(image.index == 0)
56
46
 
@@ -60,7 +50,7 @@
60
50
 
61
51
  image.y += 1
62
52
 
63
- },17);
53
+ },19);
64
54
 
65
55
 
66
56
 
@@ -70,111 +60,65 @@
70
60
 
71
61
  </script>
72
62
 
73
- </head>
74
-
75
- <body>
76
-
77
- <div id = "warapper">
78
-
79
- <canvas id="cvs" width="800px" height="900px" style="background-color:#f5f5f5;"></canvas>
80
-
81
- </div>
82
-
83
- <section id = body>
84
-
85
- <!-- body -->
86
-
87
- <header>
88
-
89
- <h1>Rmoon<span>#</span>Portfolio</h1>
90
-
91
- </header>
92
-
93
-
94
-
95
- </section>
96
-
97
- </body>
98
-
99
- </html>
100
-
101
63
 
102
64
 
103
65
  ```
104
66
 
105
67
  ```CSS
106
68
 
107
- /*共通*/
69
+ /*body*/
108
70
 
109
- h1{
71
+ body #wrapper{
110
72
 
73
+ width: 100%;
74
+
75
+ height:100%;
76
+
111
- font-size: 30px;
77
+ min-height:100%;
78
+
79
+ overflow: hidden;
80
+
81
+ position: fixed;}
82
+
83
+ body{
84
+
85
+ width:100%;
86
+
87
+ margin: 0;
88
+
89
+ padding: 0;
112
90
 
113
91
  }
114
92
 
115
- span{
93
+ body #wrapper{
116
94
 
117
- color: #c93a40;
95
+ width: 100%;
118
96
 
119
- }
97
+ height:100%;
120
98
 
99
+ min-height:100%;
100
+
101
+ overflow: hidden;
102
+
103
+ position: fixed;
104
+
105
+ }
106
+
107
+ #container {
108
+
109
+ background:
110
+
121
- /*共通ここまで*/
111
+ position: absolute;
112
+
113
+ top:0;
114
+
115
+ right:20px;
116
+
117
+ left:20px;
118
+
119
+ }
122
120
 
123
121
 
124
-
125
- /*body*/
126
-
127
- body{
128
-
129
- width: 100%;
130
-
131
- height: 100%;
132
-
133
- overflow: hidden;
134
-
135
- position: fixed;
136
-
137
- background: -webkit-canvas(cvs);
138
-
139
- }
140
-
141
- #warapper{
142
-
143
- width: 100%;
144
-
145
- height: 100%;
146
-
147
- overflow: hidden;
148
-
149
- position: fixed;
150
-
151
- }
152
-
153
- #cvs{
154
-
155
- position:fixed; top:0; left:0; width:100%; height:100%;
156
-
157
- z-index: -1;
158
-
159
- }
160
-
161
- #body{
162
-
163
- position:absolute;
164
-
165
- top:0;
166
-
167
- left:0;
168
-
169
- right: 0;
170
-
171
- background-color:#f5f5f5;
172
-
173
- z-index: 2;
174
-
175
- background: -webkit-canvas(cvs);
176
-
177
- }
178
122
 
179
123
 
180
124