抖音小游戏画图&位置移动

画图

const canvas = tt.createCanvas();
const context = canvas.getContext('2d');

context.width = 500;
context.height = 500;

let isPressing = false; // 是否按下
let startX = 0;
let startY = 0;

context.fillStyle = "#f00";
context.fillRect(0,0,100,100);

//点击鼠标事件
tt.onTouchStart((e)=>{
  // onTouchMove(e)
  console.log('onTouchStart:',e.touches[0].clientX)
  startX = e.touches[0].clientX
  startY = e.touches[0].clientY
  isPressing = true;
})
//鼠标移动
tt.onTouchMove((e)=>{
  console.log('onTouchMove:',e.touches[0].clientX)
  const touch = e.touches[0];
  const dx = touch.clientX - startX;
  const dy = touch.clientY -startY;
  // console.log('dx:',dx,'dy:',dy)
  // context.clearRect(startX,startY,100,100);
  context.fillStyle = '#f00';
  context.fillRect(dx,dy,100,100)
})

移动图形位置

const canvas = tt.createCanvas();
const context = canvas.getContext('2d');

context.width = 500;
context.height = 500;

let isPressing = false; // 是否按下
let startX = 0; //初始位置
let startY = 0; //初始位置

let moveStartX = 0; //移动后的位置
let moveStartY = 0; //移动后的位置

context.fillStyle = "#f00";
context.fillRect(0,0,100,100);

tt.onTouchStart((e)=>{
  // onTouchMove(e)
  console.log('onTouchStart:',e.touches[0].clientX)
  startX = e.touches[0].clientX
  startY = e.touches[0].clientY
  isPressing = true;
})
tt.onTouchMove((e)=>{
  console.log('onTouchMove:',e.touches[0].clientX)
  const touch = e.touches[0];
  const dx = touch.clientX -50; //无论如何要在中心点,根据图像大小来定义
  const dy = touch.clientY -50; //无论如何要在中心点,根据图像大小来定义
  // console.log('dx:',dx,'dy:',dy)
  // context.clearRect(startX,startY,100,100);
  context.clearRect(moveStartX,moveStartY,100,100)
  context.fillStyle = '#f00';
  context.fillRect(dx,dy,100,100)
  moveStartX = dx;
  moveStartY = dy;
})

原文地址：https://blog.csdn.net/yasinawolaopo/article/details/142874844

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！