Javascript 如何从鼠标改为触摸？

我使用canvas创建了一个颜色选择器，并且能够获取颜色代码，但是当我在移动表单中使用它时，我只能点击选择颜色。如何更改代码，以便在手机中使用手指在画布上拖动来选择颜色

var canvas = document.getElementById("picker");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 100;
var counterClockwise = false;

for(var angle=0; angle<=360; angle+=1){
    var startAngle = (angle-2)*Math.PI/180;;
    var endAngle = angle * Math.PI/180;
    context.beginPath();
    context.moveTo(x, y);
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.closePath();
    context.fillStyle = 'hsl('+angle+', 100%, 50%)';
    context.fill();
}


function createColorWheel(){
    var ctx = document.getElementById('picker').getContext('2d');
   ctx.canvas.addEventListener('mousemove',function(e){
       // Set the offset for canvas x and y                                           
    var X =  e.clientX - ctx.canvas.offsetLeft;
       var Y = e.clientY - ctx.canvas.offsetTop;
    // Get Image Data Object of pixel currently under crosshair
    var imageData = ctx.getImageData(X, Y, 1, 1);
    // Set pixel to the data array (r, g, b, a)
       var pixel = imageData.data; 
    // Add leading zero to number
    // Convert  number to a hexadecimal string with .toString(16)
    // Get the last 2 digits of that string with .slice
    var r = ("0" + (pixel[0]).toString(16)).slice(-2);
    var g = ("0" + (pixel[1]).toString(16)).slice(-2);
    var b = ("0" + (pixel[2]).toString(16)).slice(-2);
    htmlHex = "#"+r+g+b;
    // Change background color of the canvas as the mouse moves
    var previewColor = document.getElementById('picker').style.background = htmlHex;
   });        
}

window.onload = createColorWheel; 

var canvas=document.getElementById（“选择器”）；
var context=canvas.getContext（“2d”）；
var x=画布宽度/2；
变量y=画布高度/2；
var半径=100；
var逆时针=假；
对于（var angle=0；angle而言，问题在于移动设备将触发触摸事件而不是鼠标事件。在您的情况下，您应该在移动设备上使用
touchmove
事件

您可以通过更改事件侦听器使代码适用于触摸事件。请注意，触摸位置是使用
changedtouchs
属性检索的

ctx.canvas.addEventListener('touchmove',function(e){                                  
    var X =  e.changedTouches[0].clientX - ctx.canvas.offsetLeft;
    var Y = e.changedTouches[0].clientY - ctx.canvas.offsetTop;
    //........

如果您需要代码在多个平台上工作，则可能需要进行更多的编码，以处理不同平台上的不同事件

处理跨平台事件的一个简单解决方案是使用。它有一个处理跨平台问题的事件。
问题是移动设备将触发触摸事件而不是鼠标事件。在您的情况下，您应该在移动设备上使用
touchmove
事件

您可以通过更改事件侦听器使代码适用于触摸事件。请注意，触摸位置是使用
changedtouchs
属性检索的

ctx.canvas.addEventListener('touchmove',function(e){                                  
    var X =  e.changedTouches[0].clientX - ctx.canvas.offsetLeft;
    var Y = e.changedTouches[0].clientY - ctx.canvas.offsetTop;
    //........

如果您需要代码在多个平台上工作，则可能需要进行更多的编码，以处理不同平台上的不同事件

处理跨平台事件的一个简单解决方案是使用。它有一个处理跨平台问题的事件