【追記】
hirohiroさん、edo_m18さんのコードで、斜めに線を引くとこうなります。
たしかに修正前のようにスカスカはしませんが、きれいに描画されてないように思います。
【追記終】
上のイメージのように、線を太い設定のまま書くとこのように粗く表示されてしまいます。
下記が上記のようになってしまうcanvasの設定です。
html
1<canvas width="780" height="400"></canvas>
javascript
1 2 var borderWidth = 5; 3 var fromX; 4 var fromY; 5 var drawFlag = false; 6 var context = $("canvas").get(0).getContext('2d'); 7 var pale = '#ff25a8'; //色 8 var penWidth = 2; //太さ 9 10 $('canvas').mousedown(function(e) { 11 drawFlag = true; 12 fromX = e.pageX - $(this).offset().left - borderWidth; 13 fromY = e.pageY - $(this).offset().top - borderWidth; 14 return false; // for chrome 15 }); 16 17 $('canvas').mousemove(function(e) { 18 if (drawFlag) { 19 draw(e); 20 } 21 }); 22 23 $('canvas').on('mouseup', function() { 24 drawFlag = false; 25 }); 26 27 $('canvas').on('mouseleave', function() { 28 drawFlag = false; 29 }); 30 31 function draw(e) { 32 var toX = e.pageX - $('canvas').offset().left - borderWidth; 33 var toY = e.pageY - $('canvas').offset().top - borderWidth; 34 context.strokeStyle = pale; //色の設定 paleという変数に入れてます。 35 context.lineWidth = penWidth; //太さの設定 上記の画像は30 36 context.beginPath(); 37 context.moveTo(fromX, fromY); 38 context.lineTo(toX, toY); 39 context.stroke(); 40 context.closePath(); 41 42 fromX = toX; //追記 43 fromY = toY; //追記 44 }
どなたか対処法など、ご教示お願いいたします。
コードで書いて説明していただけるとうれしいです。
回答5件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/01 17:24
2015/08/02 07:31 編集
2015/08/13 13:58