質問編集履歴
7
コードの修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -128,13 +128,13 @@
|
|
128
128
|
|
129
129
|
|
130
130
|
|
131
|
-
ImageData.data[target_pixel
|
131
|
+
ImageData.data[target_pixel] = 255; // 赤 red
|
132
|
-
|
132
|
+
|
133
|
-
ImageData.data[target_pixel
|
133
|
+
ImageData.data[target_pixel] = 255; // 緑 green
|
134
|
-
|
134
|
+
|
135
|
-
ImageData.data[target_pixel
|
135
|
+
ImageData.data[target_pixel] = 255; // 青 blue
|
136
|
-
|
136
|
+
|
137
|
-
ImageData.data[target_pixel
|
137
|
+
ImageData.data[target_pixel] = 255; // 透明度 alpha
|
138
138
|
|
139
139
|
// 書き換えたImageDataをcanvasへ書き出す
|
140
140
|
|
6
コードの修正
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
表示の修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -225,3 +225,5 @@
|
|
225
225
|
</BODY>
|
226
226
|
|
227
227
|
</HTML>
|
228
|
+
|
229
|
+
```
|
4
コードの修正
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
表示の修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -1,4 +1,6 @@
|
|
1
|
-
canvasへ[このサイト](http://tech.kayac.com/archive/javascript-canvas-imagedata.html)の方法を使って書き込もうと思っているのですが、x,yの値を
|
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
コードの追加
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
日本語の修正。
test
CHANGED
File without changes
|
test
CHANGED
@@ -6,4 +6,4 @@
|
|
6
6
|
|
7
7
|
canvasの左上の角に対するx,yは用意できています。
|
8
8
|
|
9
|
-
変換する方法を教えて
|
9
|
+
変換する方法を教えていただきたいです。
|