javascriptのcanvasでスマホ対応のお絵描きツールを作成したのですが、
pc上では描けるのですが、スマホ上では何も絵画されません。
タッチした座標も取得する様にしたのですが...
原因は一体何なんでしょうか。ご教授よろしくお願いいたします。
javascript
1function drawScript(){ 2 var canvas = document.getElementById('drawCanvas'); 3 canvas.width = 500; 4 canvas.height = 400; 5 var ctx = canvas.getContext('2d'); 6 ctx.beginPath(); 7 ctx.fillStyle = "#fff"; 8 ctx.fillRect(0, 0, 500, 400); 9 $('#undo, #redo').attr('disabled', true); 10 var outputData = new Array(); 11 var outputLength = -1; 12 var isDrawing; 13 var bgColor = "#fff"; 14 var penSize = 3; 15 var penColor = "#000000"; 16 var mouseX; 17 var mouseY; 18 if (window.TouchEvent) { 19 $('canvas').on('touchstart', function(e) { 20 onClick(e); 21 isDrawing = true; 22 }).on('touchmove', function(e) { 23 onMove(e); 24 e.preventDefault(); 25 }).on('touchend', function() { 26 if (!isDrawing) return; 27 saveImageData(); 28 isDrawing = false; 29 }).on('touchcancel', function() { 30 if (!isDrawing) return; 31 saveImageData(); 32 isDrawing = false; 33 }); 34 } else { 35 $('canvas').on('mousedown', function(e) { 36 onClick(e); 37 isDrawing = true; 38 }).on('mousemove', function(e) { 39 onMove(e); 40 }).on('mouseup', function() { 41 if (!isDrawing) return; 42 drawEnd(); 43 saveImageData(); 44 isDrawing = false; 45 }).on('mouseleave', function() { 46 if (!isDrawing) return; 47 drawEnd(); 48 saveImageData(); 49 isDrawing = false; 50 }); 51 } 52 53 function onMove(e) { 54 if (e.buttons === 1 || e.witch === 1) { 55 var rect = e.target.getBoundingClientRect(); 56 if (window.TouchEvent) { 57 var X = (e.changedTouches[0].pageX - rect.left); 58 var Y = (e.changedTouches[0].pageY - rect.top); 59 } else { 60 var X = (e.clientX - rect.left); 61 var Y = (e.clientY - rect.top); 62 } 63 draw(X, Y); 64 }; 65 }; 66 67 function onClick(e) { 68 if (e.button === 0) { 69 var rect = e.target.getBoundingClientRect(); 70 if (window.TouchEvent) { 71 var X = (e.changedTouches[0].pageX - rect.left); 72 var Y = (e.changedTouches[0].pageY - rect.top); 73 } else { 74 var X = (e.clientX - rect.left); 75 var Y = (e.clientY - rect.top); 76 } 77 draw(X, Y); 78 } 79 }; 80 81 function draw(X, Y) { 82 ctx.beginPath(); 83 if (mouseX === "") { 84 ctx.moveTo(X, Y); 85 } else { 86 ctx.moveTo(mouseX, mouseY); 87 } 88 ctx.lineTo(X, Y); 89 ctx.lineCap = "round"; 90 ctx.lineWidth = penSize; 91 ctx.strokeStyle = penColor; 92 ctx.stroke(); 93 mouseX = X; 94 mouseY = Y; 95 }; 96 97 function drawEnd() { 98 mouseX = ""; 99 mouseY = ""; 100 ctx.closePath(); 101 } 102 103 function saveImageData() { 104 // 現在の状態を保存 105 if (outputLength >= outputData.length) { 106 outputData.shift(); 107 } else { 108 ++outputLength; 109 } 110 if (outputLength <= outputData.length) { 111 $('#redo').attr('disabled', true); 112 } 113 outputData[outputLength] = ctx.getImageData(0, 0, canvas.width, canvas.height); 114 $('#undo').attr('disabled', false); 115 } 116}
html
1<script type="text/javascript"> 2<!-- // 3$(function(){ 4 drawScript(); 5}); 6// --> 7</script> 8<canvas id="drawCanvas" width="500" height="400"></canvas>
回答1件
あなたの回答
tips
プレビュー