Download presentation
Presentation is loading. Please wait.
1
2015/Spring 跨平台行動程式進階應用 王派洲老師
Office:L306-2, Tel: Ext.4327
2
課程大綱 HTML5 Canvas Touch事件
3
Canvas <canvas>畫布標籤用於圖片繪製
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
4
File套件 安裝 cordova plugin add org.apache.cordova.file
5
Canvas-2 var cav=document.getElementById('myCanvas');
var ctx = cav.getContext('2d'); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75);
6
Canvas drawImage drawImage(img,x,y) drawImage(img,x,y,width,height)
將圖片顯示於canvas座標(x,y)上 drawImage(img,x,y,width,height) 將圖片以width,height大小顯示於canvas座標(x,y)上 drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
7
Canvas drawImage drawImage(img,x,y) function onImage1Load() {
將圖片顯示於canvas座標(x,y)上 function onImage1Load() { ctx.drawImage(img,0,0); } receivedEvent: function(id) { can = document.getElementById('myCanvas'); ctx=can.getContext('2d'); img=new Image(); img.onload = onImage1Load; img.src= "img/htc.jpg";
8
沒有設定Canvas大小 drawImage(img,x,y) function onImage1Load() {
將圖片顯示於canvas座標(x,y)上 function onImage1Load() { ctx.drawImage(img,0,100); } receivedEvent: function(id) { can = document.getElementById('myCanvas'); ctx=can.getContext('2d'); img=new Image(); img.onload = onImage1Load; img.src= "img/htc.jpg";
9
設定Canvas大小 drawImage(img,x,y) function onImage1Load() {
將圖片顯示於canvas座標(x,y)上 function onImage1Load() { ctx.drawImage(img,0,100); } receivedEvent: function(id) { can = document.getElementById('myCanvas'); ctx=can.getContext('2d'); img=new Image(); img.onload = onImage1Load; img.src= "img/htc.jpg";
10
Canvas drawImage drawImage(img,x,y,width,height)
將圖片以width,height大小顯示於canvas座標(x,y)上 function onImage1Load() { ctx.drawImage(img,0,0,100,100); } receivedEvent: function(id) { can = document.getElementById('myCanvas'); ctx=can.getContext('2d'); img=new Image(); img.onload = onImage1Load; img.src= "img/htc.jpg";
11
Canvas drawImage drawImage(img, sx, sy, sw, sh, dx, dy, w, h)
選擇原始圖片sx,sy位置開始sw與sh寬與高，顯示 於canvas dx,dy位置以w,h寬與高顯示 function onImage1Load() { ctx.drawImage(img, 30,50,150,50,20,20,150,50); } receivedEvent: function(id) { can = document.getElementById('myCanvas'); ctx=can.getContext('2d'); img=new Image(); img.onload = onImage1Load; img.src= "img/htc.jpg";
12
Touch event(多點) touchstart
代表一個新的touch發生，事件中的changedTouches包含事件發生時所有的接觸點，changedTouches中的 每個touch包含屬性identifier, pageX, pageY 執行事件處理時必須先執行event.preventDefault() 其目的是避免程式繼續執行其他touch事件 function onStart(evt) { evt.preventDefault(); var touches=evt.changedTouches; alert("X:"+touches[0].pageX+", Y:"+touches[0].pageY); } receivedEvent: function(id) { can = document.getElementById('myCanvas'); ctx=can.getContext('2d'); can.width=screen.width; can.height=screen.height; can.addEventListener("touchstart",function(evt){onStart(evt);},false);
13
Touch event(多點) touchmove
代表一個新的touch移動發生，事件中的changedTouches包含事件發生時所有的接觸點，每個touch 中pageX與pageY代表移動至位置 執行事件處理時必須先執行event.preventDefault() 其目的是避免程式繼續執行其他touch事件 練習: 利用Canvas、moveTo、lineTo、stroke()、touchstart、touchmove製作簡單手指繪圖APP
14
Puzzle拼圖
Similar presentations
