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