利用HTML5實現多點觸摸，在Canvas上實時繪制兩點，方便觀察多點效果。代碼簡單易懂，在iPad上運行效果最佳。
?
兩個手指點在屏幕上移動時兩個小點會跟隨手指移動：
![[轉]HTML5多點觸摸演示源碼（Canvas繪制演示）_第1張圖片](http://img.it610.com/image/product/48bf3c2dfb2e4949b324b2d0c994d54c.jpg "HTML5多點觸摸演示源碼（Canvas繪制演示）")
?
關鍵代碼：
獲取控件：
?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) {
? //阻止瀏覽器默認的動作，滑動，縮放等
? event.preventDefault();
?
? if (event.touches.length == 1) {
? ? ? //你可以用event.touches[0].clientX和 event.touches[0].clientY獲得坐標
? }
? else if (event.touches.length == 2) {
? ? //你可以用event.touches[0].clientX和 event.touches[0].clientY獲得坐標
? ? //你可以用event.touches[1].clientX和 event.touches[1].clientY獲得第二點坐標
? }
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
