iT邦幫忙

1

HTML繪圖板 一直無法在手機上執行

匿名 2016-02-23 18:23:171470 瀏覽
  • 分享至 

  • xImage

我的程式碼一直在手機上無法執行 不知道有沒有哪位好心人可以給我一點建議呢?

<!--繪圖板-->
<!-- Canvas -->			
<div><input type="image" src = "images/pencil.png" height = "30" id="pencil" onClick="write_text()"></input>     
<input type="image" src = "images/eraser.png" height = "30"></input></div>
<div><canvas id="DrawingArea" width="900" height="1000" style="border: 2px solid gray"></canvas></div>
<!-- Canvas end -->

function write_text(){
    var Drawing = document.getElementById("DrawingArea");
    var ctx = Drawing.getContext("2d"); //取得繪製2d圖形的畫筆
    var drawMode = false;  //判斷是否正在繪圖
    ctx.fillStyle = "white"; //整個canvas塗上白色背景避免PNG的透明底色效果
	
    //Drawing點選、移動、放開按鍵事件時進行繪圖動作
    Drawing.addEventListener("touchstart", function (e) {
	var write_x = (e.clientX) - ($("#DrawingArea").position().left);
	var write_y = (e.clientY) - ($("#DrawingArea").position().top);
	ctx.beginPath(); //路徑開始
	ctx.strokeStyle = "rgb(0,0,255)"; //設定筆填充的顏色
	ctx.lineWidth = 5; //筆的粗細(單位是像素點)					
	ctx.moveTo(write_x, write_y);	//繪圖點的起始座標
	drawMode = true;
     });
     
     Drawing.addEventListener("touchmove", function (e) {
	var write_x = (e.clientX) - ($("#DrawingArea").position().left);
	var write_y = (e.clientY) - ($("#DrawingArea").position().top);
	if (drawMode){
		ctx.lineTo(write_x, write_y); //繪圖點的最終座標
		ctx.stroke();	//執行繪圖		
	}			
      });
      Drawing.addEventListener("touchend", function (e) {
	drawMode = false;
	ctx.closePath();
      });
}
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

4
dk880842
iT邦新手 5 級 ‧ 2016-02-24 10:00:33
最佳解答

(e.clientX) // undefined

改成

(e.changedTouches[0].clientX)

我要發表回答

立即登入回答