teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

コード修正

2015/08/01 17:13

投稿

hirohiro
hirohiro

スコア2068

answer CHANGED
@@ -15,11 +15,6 @@
15
15
 
16
16
  修正コードを追記します。これでどうでしょう?
17
17
  ```JavaScript
18
- <html>
19
- <head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head>
20
- <body>
21
- <script type="text/javascript">
22
- $(document).ready(function(){
23
18
  var borderWidth = 5;
24
19
  var fromX;
25
20
  var fromY;
@@ -30,12 +25,12 @@
30
25
 
31
26
  $('canvas').mousedown(function(e) {
32
27
  drawFlag = true;
28
+ fromX = e.pageX - $(this).offset().left - borderWidth;
29
+ fromY = e.pageY - $(this).offset().top - borderWidth;
33
30
  context.beginPath(); //追加
34
31
  context.moveTo(fromX, fromY); //追加
35
32
  context.strokeStyle = pale; //追加
36
33
  context.lineWidth = penWidth; //追加
37
- fromX = e.pageX - $(this).offset().left - borderWidth;
38
- fromY = e.pageY - $(this).offset().top - borderWidth;
39
34
  return false; // for chrome
40
35
  });
41
36
 
@@ -69,9 +64,4 @@
69
64
  // context.closePath(); 削除
70
65
  }
71
66
  });
72
- </script>
73
-
74
- <canvas width="780" height="400"></canvas>
75
- </body>
76
- </html>
77
67
  ```

1

コード修正

2015/08/01 17:13

投稿

hirohiro
hirohiro

スコア2068

answer CHANGED
@@ -10,4 +10,68 @@
10
10
  }
11
11
  });
12
12
  ```
13
- ※何度も同じ記述が出てきて格好は悪いですが、とりあえず動作するのではないかと思います。
13
+ ※何度も同じ記述が出てきて格好は悪いですが、とりあえず動作するのではないかと思います。
14
+
15
+
16
+ 修正コードを追記します。これでどうでしょう?
17
+ ```JavaScript
18
+ <html>
19
+ <head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head>
20
+ <body>
21
+ <script type="text/javascript">
22
+ $(document).ready(function(){
23
+ var borderWidth = 5;
24
+ var fromX;
25
+ var fromY;
26
+ var drawFlag = false;
27
+ var context = $("canvas").get(0).getContext('2d');
28
+ var pale = '#ff25a8'; //色
29
+ var penWidth = 20; //太さ
30
+
31
+ $('canvas').mousedown(function(e) {
32
+ drawFlag = true;
33
+ context.beginPath(); //追加
34
+ context.moveTo(fromX, fromY); //追加
35
+ context.strokeStyle = pale; //追加
36
+ context.lineWidth = penWidth; //追加
37
+ fromX = e.pageX - $(this).offset().left - borderWidth;
38
+ fromY = e.pageY - $(this).offset().top - borderWidth;
39
+ return false; // for chrome
40
+ });
41
+
42
+ $('canvas').mousemove(function(e) {
43
+ if (drawFlag) {
44
+ draw(e);
45
+ }
46
+ });
47
+
48
+ $('canvas').on('mouseup', function() {
49
+ drawFlag = false;
50
+ context.closePath(); //追加
51
+ });
52
+
53
+ $('canvas').on('mouseleave', function() {
54
+ drawFlag = false;
55
+ context.closePath(); //追加
56
+ });
57
+
58
+ function draw(e) {
59
+ var toX = e.pageX - $('canvas').offset().left - borderWidth;
60
+ var toY = e.pageY - $('canvas').offset().top - borderWidth;
61
+ // context.strokeStyle = pale; 削除
62
+ // context.lineWidth = penWidth; 削除
63
+ // context.beginPath(); 削除
64
+ // context.moveTo(fromX, fromY); 削除
65
+ context.lineTo(toX, toY);
66
+ context.stroke();
67
+ fromX = toX; //追加
68
+ fromY = toY; //追加
69
+ // context.closePath(); 削除
70
+ }
71
+ });
72
+ </script>
73
+
74
+ <canvas width="780" height="400"></canvas>
75
+ </body>
76
+ </html>
77
+ ```