利用HTML5實(shí)現(xiàn)多點(diǎn)觸摸，在Canvas上實(shí)時(shí)繪制兩點(diǎn)，方便觀察多點(diǎn)效果。代碼簡(jiǎn)單易懂，在iPad上運(yùn)行效果最佳。
?
兩個(gè)手指點(diǎn)在屏幕上移動(dòng)時(shí)兩個(gè)小點(diǎn)會(huì)跟隨手指移動(dòng)：
![[轉(zhuǎn)]HTML5多點(diǎn)觸摸演示源碼（Canvas繪制演示）_第1張圖片](http://img.it610.com/image/product/48bf3c2dfb2e4949b324b2d0c994d54c.jpg "HTML5多點(diǎn)觸摸演示源碼（Canvas繪制演示）")
?
關(guān)鍵代碼：
獲取控件：
?var canvas = document.getElementByIdx_x("canvas");
判斷是否支持觸摸：
? var touchable = 'createTouch' in document;
?
如果支持就添加事件:
if (touchable) {
? canvas.addEventListener('touchstart', onTouchStart, false);
? canvas.addEventListener('touchmove', onTouchMove, false);
? canvas.addEventListener('touchend', onTouchEnd, false);
}
?
?
function onTouchMove(event) {
? //阻止瀏覽器默認(rèn)的動(dòng)作，滑動(dòng)，縮放等
? event.preventDefault();
?
? if (event.touches.length == 1) {
? ? ? //你可以用event.touches[0].clientX和 event.touches[0].clientY獲得坐標(biāo)
? }
? else if (event.touches.length == 2) {
? ? //你可以用event.touches[0].clientX和 event.touches[0].clientY獲得坐標(biāo)
? ? //你可以用event.touches[1].clientX和 event.touches[1].clientY獲得第二點(diǎn)坐標(biāo)
? }
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
