画图

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].clientXstartY = e.touches[0].clientYisPressing = 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].clientXstartY = e.touches[0].clientYisPressing = 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;
})