在做h5 canvas的时候需要注意一点,html网页上用canvas组件在不同平台上交互有时候会失效,需要做兼容处理,那是因为在手机浏览器上的不是鼠标点击,就是屏幕触摸事件.
在PC机浏览器上，都是用点击事件，
需要监听画布上的鼠标点击事件，代码如下，
//...
canvas.addEventListener('mousedown',(event)=>{
const { x, y } = event;
onTouchStart(x,y)
});
canvas.addEventListener('mousemove',(event)=>{
const { x, y } = event;
onTouchMove(x,y);
});
canvas.addEventListener('mouseup',onTouchEnd);
在手机（可触摸设备）浏览器上，小程序上，都是用触摸事件，
需要监听画布上的触摸事件，代码如下
//...
canvas.addEventListener('touchstart',(event)=>{
const { pageX:x, pageY:y } = event.touches[0];
onTouchStart(x,y);
});
canvas.addEventListener('touchmove',(event)=>{
const { pageX:x, pageY:y } = event.touches[0];
onTouchMove(x,y);
});
canvas.addEventListener('touchend',onTouchEnd);
要做兼容处理，就将上面的代码全部写一遍，并调用公用的方法，追加的代码如下
//触摸开始
function onTouchStart(x,y){
//...
}
//触摸移动
function onTouchMove(x,y){
//...
}
//触摸结束
function onTouchEnd(){
//...
}
就
讲到这，话不多.文章来源：https://www.toymoban.com/news/detail-602328.html
文章来源地址https://www.toymoban.com/news/detail-602328.html
到了这里，关于【Canvas】在HTML画布上监听鼠标点击或触摸事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
