canvas/onmousedown/onmouseover/onmouseup/ontouchstart/ontouchmove/ontouchend

canvas 宽高等比缩放，不要用css控制初始宽高

pc端事件	移动端事件
onmousedown	ontouchstart
onmousemove	ontouchmove
onmouseup	ontouchend

onmouseenter|onmouseleave与onmouseover|onmouseout的区别

两个事件都是在鼠标指针移动到元素上时触发。
二者区别： onmouseenter 事件不支持冒泡 。
onmouseover|onmouseout事件被触发时，该元素的祖先元素的onmouseover|onmouseout事件也会冒泡触发。

onresize 事件会在窗口或框架被调整大小时发生。
window.onresize = function () {...}

js的in查询
浏览器控制台测试：
'ontouchstart' in document.body//判断是否支持ontouchstart
false
'onmousedown' in document.body//判断是否支持onmousedown
true

移动端适配

width=device-width : 页面宽度 = 设备宽度
user-scalable=no : 用户是否可以缩放
initial-scale=1.0 : 初始的缩放比例1:1
maximum-scale=1.0 : 最大的缩放比例1:1
minimum-scale=1.0 : 最小的缩放比例1:1

触屏设备特性检测if (document.body.ontouchstart !== undefined) {...}

    // var eraserEnabled = false;
    // eraser.onclick = function () {
    //     eraserEnabled = !eraserEnabled;
    //     // console.log(eraserEnabled);
    // }

测试触屏下是否有此属性，即此属性是否支持触屏

image.png