質問編集履歴
3
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -107,8 +107,7 @@
|
|
|
107
107
|
</html>
|
|
108
108
|
|
|
109
109
|
|
|
110
|
-
```````````````
|
|
110
|
+
```````````````
|
|
111
|
-
|
|
112
111
|
現在、canvasでお絵描きツールを作成しています。
|
|
113
112
|
現在、このプログラムは、カラーパレットから色を選択できるようになっています。
|
|
114
113
|
しかし、こんなに色は必要ではないので、「赤」、「青」、「黄」のようにそれぞれ色のボタンを配置し、そのボタンをクリックすると、その色に対応したペンで描画ができるというものを作りたいです。
|
2
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,17 +1,23 @@
|
|
|
1
|
-
```
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
```ここに言語を入力
|
|
2
|
+
<!DOCTYPE html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset='utf-8'>
|
|
6
|
+
<title>お絵描きツール</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
background: #eee;
|
|
10
|
+
}
|
|
11
|
+
#canvas {
|
|
12
|
+
margin: 10px; background:
|
|
13
|
+
#ffffff; border: 1px solid #aaaaaa;
|
|
14
|
+
}
|
|
15
|
+
#canvas {
|
|
16
|
+
margin: 10px; background:
|
|
17
|
+
url(./picture/cat.png); background-size: 100% 100%;
|
|
18
|
+
border: 1px solid #aaaaaa;
|
|
19
|
+
border:solid 3px #000000;
|
|
20
|
+
}
|
|
15
21
|
input[type="image"]{
|
|
16
22
|
padding: 2px;
|
|
17
23
|
outline: none;
|
|
@@ -21,5 +27,92 @@
|
|
|
21
27
|
background-color: #fff;
|
|
22
28
|
}
|
|
23
29
|
|
|
24
|
-
</style>
|
|
30
|
+
</style>
|
|
31
|
+
</head>
|
|
32
|
+
<body>
|
|
33
|
+
<canvas id="canvas" width="1103" height="1190"></canvas><br>
|
|
34
|
+
<label>色<input id="color" type="color"></label>
|
|
35
|
+
<label>太さ<input id="width" type="number" min="1" max="15"></label> <input type="image" id="delete_canvas" src="./picture/clean.png" alt="クリア" width="45px" onClick="delete_canvas()">
|
|
36
|
+
<input type="image" id="pencil" src="./picture/pen.png" alt="鉛筆" width="45px" class="active" onClick="tool(1)">
|
|
37
|
+
<input type="image" id="eraser" src="./picture/keshigomu.png" alt="消しゴム" width="45px" onClick="tool(2)">
|
|
38
|
+
<script type="text/javascript">
|
|
39
|
+
var drawing = false; // 前回の座標を記録する（初期値：０）
|
|
40
|
+
var before_x = 0;
|
|
41
|
+
var before_y = 0;
|
|
42
|
+
var canvas = document.getElementById('canvas');
|
|
43
|
+
ctx = canvas.getContext('2d'); // canvas 全体に画像を配置 ここから+++
|
|
44
|
+
var canvasW = canvas.width;
|
|
45
|
+
var canvasH = canvas.height;
|
|
46
|
+
var photo = new Image();
|
|
47
|
+
// 画像オブジェクトを生成画像を canvas に表示
|
|
48
|
+
photo.onload = function() {
|
|
49
|
+
ctx.drawImage(photo, 0, 0, canvasW, canvasH); // 画像を canvas 全体に表示
|
|
50
|
+
} photo.src = "./picture/kamiyuge.png"; // 画像ファイルの指定 */ canvas.addEventListener('mousemove', draw_canvas); // マウスをクリックしてる時 canvas.addEventListener('mousedown', function(e) {
|
|
51
|
+
drawing = true; var rect = e.target.getBoundingClientRect();
|
|
52
|
+
before_x = e.clientX - rect.left; before_y = e.clientY - rect.top; });
|
|
53
|
+
// マウスをクリックしてない時
|
|
54
|
+
canvas.addEventListener('mouseup', function() { drawing = false; }); canvas.addEventListener('touchstart', startPoint, false); canvas.addEventListener('touchmove', movePoint, false); canvas.addEventListener('touchend', endPoint, false);
|
|
55
|
+
// 描画の処理
|
|
56
|
+
function draw_canvas(e) { // drawingがtrueじゃなかったら返す
|
|
57
|
+
if (!drawing){ return };
|
|
58
|
+
var rect = e.target.getBoundingClientRect();
|
|
59
|
+
var x = e.clientX - rect.left;
|
|
60
|
+
var y = e.clientY - rect.top;
|
|
61
|
+
var w = document.getElementById('width').value;
|
|
62
|
+
var color = document.getElementById('color').value;
|
|
63
|
+
var r = parseInt(color.substring(1,3), 16);
|
|
64
|
+
var g = parseInt(color.substring(3,5), 16);
|
|
65
|
+
var b = parseInt(color.substring(5,7), 16); // 描画
|
|
66
|
+
ctx.lineCap = 'round';
|
|
67
|
+
ctx.strokeStyle = 'rgb('+ r + ',' + g + ',' + b + ')';
|
|
68
|
+
ctx.lineWidth = w;
|
|
69
|
+
ctx.beginPath();
|
|
70
|
+
ctx.moveTo(before_x, before_y);
|
|
71
|
+
ctx.lineTo(x, y);
|
|
72
|
+
ctx.stroke();
|
|
73
|
+
ctx.closePath();
|
|
74
|
+
// 描画最後の座標を前回の座標に代入する
|
|
75
|
+
before_x = x; before_y = y;
|
|
76
|
+
}
|
|
77
|
+
// 色の変更
|
|
78
|
+
$(".color a").click(function(){
|
|
79
|
+
cnvColor = $(this).data("color");
|
|
80
|
+
return false;
|
|
81
|
+
});
|
|
82
|
+
// クリアボタンクリック時
|
|
83
|
+
// クリアボタンクリックした時にアラートを表示
|
|
84
|
+
function delete_canvas(){ r
|
|
85
|
+
et = confirm('canvasの内容を削除します。');
|
|
86
|
+
// アラートで「OK」を選んだ時
|
|
87
|
+
if (ret == true){
|
|
88
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
89
|
+
} }
|
|
90
|
+
var pen = document.getElementById('pencil');
|
|
91
|
+
var era = document.getElementById('eraser');
|
|
92
|
+
// 鉛筆と消しゴムの切り替え
|
|
93
|
+
function tool(btnNum){
|
|
94
|
+
// クリックされボタンが鉛筆だったら
|
|
95
|
+
if (btnNum == 1){
|
|
96
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
97
|
+
pen.className = 'active'; era.className = '';
|
|
98
|
+
}
|
|
99
|
+
// クリックされボタンが消しゴムだったら
|
|
100
|
+
else if (btnNum == 2){
|
|
101
|
+
ctx.globalCompositeOperation = 'destination-out';
|
|
102
|
+
pen.className = '';
|
|
103
|
+
era.className = 'active';
|
|
104
|
+
} }
|
|
105
|
+
</script>
|
|
106
|
+
</body>
|
|
107
|
+
</html>
|
|
25
108
|
|
|
109
|
+
|
|
110
|
+
```````````````ここに言語を入力
|
|
111
|
+
|
|
112
|
+
現在、canvasでお絵描きツールを作成しています。
|
|
113
|
+
現在、このプログラムは、カラーパレットから色を選択できるようになっています。
|
|
114
|
+
しかし、こんなに色は必要ではないので、「赤」、「青」、「黄」のようにそれぞれ色のボタンを配置し、そのボタンをクリックすると、その色に対応したペンで描画ができるというものを作りたいです。
|
|
115
|
+
色々試してみたのですが、どれもプログラムの書き方が違い、うまく動作させることができませんでした。どなたか、こちらのコードに追加して、教えていただけませんでしょうか。
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
1
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
|
+
````````````ここに言語を入力
|
|
2
|
+
ここに言語を入力
|
|
3
|
+
```
|
|
4
|
+
ここに言語を入力
|
|
5
|
+
```
|
|
6
|
+
ここに言語を入力
|
|
7
|
+
```
|
|
8
|
+
コード
|
|
1
|
-
現在、canvasでお絵描きツールを作成しています。
|
|
9
|
+
```現在、canvasでお絵描きツールを作成しています。
|
|
2
10
|
現在、このプログラムは、カラーパレットから色を選択できるようになっています。
|
|
3
11
|
しかし、こんなに色は必要ではないので、「赤」、「青」、「黄」のようにそれぞれ色のボタンを配置し、そのボタンをクリックすると、その色に対応したペンで描画ができるというものを作りたいです。
|
|
4
12
|
色々試してみたのですが、どれもプログラムの書き方が違い、うまく動作させることができませんでした。どなたか、こちらのコードに追加して、教えていただけませんでしょうか。
|