質問編集履歴

7

コードの修正

2016/08/03 08:47

投稿

Diawel
Diawel

スコア190

test CHANGED
File without changes
test CHANGED
@@ -128,13 +128,13 @@
128
128
 
129
129
 
130
130
 
131
- ImageData.data[target_pixel + 0] = 255; // 赤 red
131
+ ImageData.data[target_pixel] = 255; // 赤 red
132
-
132
+
133
- ImageData.data[target_pixel + 1] = 255; // 緑 green
133
+ ImageData.data[target_pixel] = 255; // 緑 green
134
-
134
+
135
- ImageData.data[target_pixel + 2] = 255; // 青 blue
135
+ ImageData.data[target_pixel] = 255; // 青 blue
136
-
136
+
137
- ImageData.data[target_pixel + 3] = 255; // 透明度 alpha
137
+ ImageData.data[target_pixel] = 255; // 透明度 alpha
138
138
 
139
139
  // 書き換えたImageDataをcanvasへ書き出す
140
140
 

6

コードの修正

2016/08/03 08:47

投稿

Diawel
Diawel

スコア190

test CHANGED
File without changes
test CHANGED
@@ -108,14 +108,16 @@
108
108
 
109
109
  if(mouseX>=0&&mouseX<=100&&mouseY>=0&&mouseY<=100){
110
110
 
111
+ var canvas = document.getElementById('mycanvas');
112
+
113
+ var cc = canvas.getContext('2d');
114
+
111
115
  var width = canvas.width;
112
116
 
113
117
  var height = canvas.height;
114
118
 
115
119
  var target_pixel = mouseX+mouseY*width; // 黒くしたいpixelの場所
116
120
 
117
- var cc = canvas.getContext('2d');
118
-
119
121
  var top = 0;
120
122
 
121
123
  var left = 0;

5

表示の修正

2016/08/03 00:36

投稿

Diawel
Diawel

スコア190

test CHANGED
File without changes
test CHANGED
@@ -225,3 +225,5 @@
225
225
  </BODY>
226
226
 
227
227
  </HTML>
228
+
229
+ ```

4

コードの修正

2016/08/03 00:28

投稿

Diawel
Diawel

スコア190

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  <div style="width:100; height:100; margin:0px 0px 10px 0px; border:10px #0a0 solid; background:#FFFFFF;" id="element_01">
32
32
 
33
- <canvas width="100" height="100"></canvas>
33
+ <canvas id="mycanvas" width="100" height="100"></canvas>
34
34
 
35
35
  </div>
36
36
 
@@ -92,8 +92,6 @@
92
92
 
93
93
  //alert("test");
94
94
 
95
- var canvas = document.getElementById('mycanvas');
96
-
97
95
  var mouseX;
98
96
 
99
97
  var mouseY;
@@ -142,4 +140,88 @@
142
140
 
143
141
  }
144
142
 
143
+ }
144
+
145
+ }
146
+
147
+
148
+
149
+ if(element.addEventListener){
150
+
151
+
152
+
153
+ // マウスのボタンを押すと実行されるイベント
154
+
155
+ element.addEventListener("mousedown" , MouseDownFunc);
156
+
157
+ // マウスのボタンを離すと実行されるイベント
158
+
159
+ element.addEventListener("mouseup" , MouseUpFunc);
160
+
161
+ // マウスカーソルが移動するたびに実行されるイベント
162
+
163
+ element.addEventListener("mousemove" , MouseMoveFunc);
164
+
165
+
166
+
167
+ // コンテキストメニューが表示される直前に実行されるイベント
168
+
169
+ element.addEventListener("contextmenu" , function (e){
170
+
171
+ // コンテキストメニューの表示を無効化
172
+
173
+ e.preventDefault();
174
+
145
- ```
175
+ });
176
+
177
+
178
+
179
+ // アタッチイベントに対応している
180
+
181
+ }else if(element.attachEvent){
182
+
183
+
184
+
185
+ // マウスのボタンを押すと実行されるイベント
186
+
187
+ element.attachEvent("onmousedown" , MouseDownFunc);
188
+
189
+ // マウスのボタンを離すと実行されるイベント
190
+
191
+ element.attachEvent("onmouseup" , MouseUpFunc);
192
+
193
+ // マウスカーソルが移動するたびに実行されるイベント
194
+
195
+ element.attachEvent("onmousemove" , MouseMoveFunc);
196
+
197
+
198
+
199
+
200
+
201
+ // コンテキストメニューが表示される直前に実行されるイベント
202
+
203
+ element.attachEvent("oncontextmenu" , function (e){
204
+
205
+ // コンテキストメニューの表示を無効化
206
+
207
+ return false;
208
+
209
+ });
210
+
211
+
212
+
213
+ }
214
+
215
+
216
+
217
+
218
+
219
+ })();
220
+
221
+ // -->
222
+
223
+ </script>
224
+
225
+ </BODY>
226
+
227
+ </HTML>

3

表示の修正

2016/08/03 00:27

投稿

Diawel
Diawel

スコア190

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,6 @@
1
- canvasへ[このサイト](http://tech.kayac.com/archive/javascript-canvas-imagedata.html)の方法を使って書き込もうと思っているのですが、x,yの値を```javascript
1
+ canvasへ[このサイト](http://tech.kayac.com/archive/javascript-canvas-imagedata.html)の方法を使って書き込もうと思っているのですが、x,yの値を
2
+
3
+ ```javascript
2
4
 
3
5
  getImageData(top, left, width, height);
4
6
 

2

コードの追加

2016/08/03 00:17

投稿

Diawel
Diawel

スコア190

test CHANGED
File without changes
test CHANGED
@@ -7,3 +7,137 @@
7
7
  canvasの左上の角に対するx,yは用意できています。
8
8
 
9
9
  変換する方法を教えていただきたいです。
10
+
11
+
12
+
13
+ 今のコード
14
+
15
+ ```javascript
16
+
17
+ <HTML>
18
+
19
+ <HEAD>
20
+
21
+ <TITLE></TITLE>
22
+
23
+ <SCRIPT language="JavaScript">
24
+
25
+ </SCRIPT>
26
+
27
+ </HEAD>
28
+
29
+ <div style="width:100; height:100; margin:0px 0px 10px 0px; border:10px #0a0 solid; background:#FFFFFF;" id="element_01">
30
+
31
+ <canvas width="100" height="100"></canvas>
32
+
33
+ </div>
34
+
35
+ <script type="text/javascript">
36
+
37
+ <!--
38
+
39
+
40
+
41
+ (function (){
42
+
43
+ var onclick=false;
44
+
45
+
46
+
47
+ // 各エレメントを取得
48
+
49
+ var element = document.getElementById("element_01");
50
+
51
+
52
+
53
+ // ------------------------------------------------------------
54
+
55
+ // マウスのボタンを押すと実行される関数
56
+
57
+ // ------------------------------------------------------------
58
+
59
+ function MouseDownFunc(e){
60
+
61
+ onclick=true;
62
+
63
+ }
64
+
65
+
66
+
67
+ // ------------------------------------------------------------
68
+
69
+ // マウスのボタンを離すと実行される関数
70
+
71
+ // ------------------------------------------------------------
72
+
73
+ function MouseUpFunc(e){
74
+
75
+ onclick=false;
76
+
77
+ }
78
+
79
+
80
+
81
+ // ------------------------------------------------------------
82
+
83
+ // マウスカーソルが移動するたびに実行される関数
84
+
85
+ // ------------------------------------------------------------
86
+
87
+ function MouseMoveFunc(e){
88
+
89
+ if(onclick){
90
+
91
+ //alert("test");
92
+
93
+ var canvas = document.getElementById('mycanvas');
94
+
95
+ var mouseX;
96
+
97
+ var mouseY;
98
+
99
+ // マウス位置を取得する
100
+
101
+ mouseX = e.pageX ; // X座標
102
+
103
+ mouseY = e.pageY ; // Y座標
104
+
105
+ mouseX-=18;
106
+
107
+ mouseY-=18;
108
+
109
+ if(mouseX>=0&&mouseX<=100&&mouseY>=0&&mouseY<=100){
110
+
111
+ var width = canvas.width;
112
+
113
+ var height = canvas.height;
114
+
115
+ var target_pixel = mouseX+mouseY*width; // 黒くしたいpixelの場所
116
+
117
+ var cc = canvas.getContext('2d');
118
+
119
+ var top = 0;
120
+
121
+ var left = 0;
122
+
123
+ // canvas全体をImageDataとして取得
124
+
125
+ var ImageData = cc.getImageData(top, left, width, height);
126
+
127
+
128
+
129
+ ImageData.data[target_pixel + 0] = 255; // 赤 red
130
+
131
+ ImageData.data[target_pixel + 1] = 255; // 緑 green
132
+
133
+ ImageData.data[target_pixel + 2] = 255; // 青 blue
134
+
135
+ ImageData.data[target_pixel + 3] = 255; // 透明度 alpha
136
+
137
+ // 書き換えたImageDataをcanvasへ書き出す
138
+
139
+ cc.putImageData(ImageData, top, left);
140
+
141
+ }
142
+
143
+ ```

1

日本語の修正。

2016/08/03 00:15

投稿

Diawel
Diawel

スコア190

test CHANGED
File without changes
test CHANGED
@@ -6,4 +6,4 @@
6
6
 
7
7
  canvasの左上の角に対するx,yは用意できています。
8
8
 
9
- 変換する方法を教えてい。
9
+ 変換する方法を教えていたきたです