Question

我有这个代码段，它绘制了许多随机的不透明度/大小圆圈，这些圆圈被配置为与鼠标事件配合使用。但是，当我尝试将el.onmousedown，el.onmousemove和el.onmouseup分别更改为el.ontouchstart，el.ontouchmove和el.ontouchend时，则在触摸设备（响应模式）或普通模式下根本不起作用。我需要以某种方式将鼠标事件更改为触摸事件并使其起作用。我不确定为什么如上所述更改它们不起作用。我将不胜感激，谢谢！下面的代码段。

function waterColour( e ) {
  function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  var el = document.getElementById('canvas');
  var ctx = el.getContext('2d');
  var isDrawing, points = [ ], radius = 15;

  ctx.lineJoin = ctx.lineCap = 'round';

  if (!ctx.fillstyle) {
   ctx.fillStyle = toolColor;
  } else {
   ctx.fillstyle = ctx.fillstyle;
  }


  el.onmousedown = function(e) {
   isDrawing = true;
   points.push({
    x: e.clientX,
    y: e.clientY,
    radius: getRandomInt(30, 40),
    opacity: Math.random() * (0.35 - 0.15) + 0.15,
    fillColour: ctx.fillstyle
  });

 };
 el.onmousemove = function(e) {
   if (!isDrawing) return;
   points.push({
     x: e.clientX,
     y: e.clientY,
     radius: getRandomInt(30, 40),
     opacity: Math.random() * (0.35 - 0.15) + 0.15,
     fillColour: ctx.fillstyle
   });

   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
   for (var i = 0; i < points.length; i++) {
     ctx.beginPath();
     ctx.globalAlpha = points[i].opacity;

     ctx.arc(
       points[i].x, points[i].y, points[i].radius,
       false, Math.PI * 2, false);
     ctx.fill();
   }
 };
 el.onmouseup = function() {
   isDrawing = false;

 }
}

在触摸设备上进行onmousedown，onmousemove，onmouseup工作

0 个答案: