19-进阶：Canvas 画板续（兼容触屏设备）

本节知识点

• JS知识点

1. touch事件
   触屏设备上，mouse事件已不适用，需转换为touch事件；
   检测是否为触屏设备方法1：

        // 开始绘画
        if('ontouchstart' in window){
            touchDrawStart();    
        }else{
            mouseDrawStart();
        }

方法2：

        // 开始绘画
        if('ontouchstart' in window){
            touchDrawStart();    
        }else{
            mouseDrawStart();
        }

2. 一个新的API：给元素增减 className ；
   方法：eraser.classList.add('active'); ; pen.classList.remove('active');

//工具切换
        function switchover(){
            eraser.onclick = function(){
                eraserEnable = true;
                eraser.classList.add('active');
                pen.classList.remove('active');
            }
            pen.onclick = function(){
                eraserEnable = false;
                pen.classList.add('active');
                eraser.classList.remove('active');
            }
        }

3. canvas 中清屏：

const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

4. canvas 中保存：

• CSS知识点

1. 第一个新的知识点：transform: scale(1.4);：放大到1.4倍。

2. 第一个旧的知识点：transition

transition CSS 属性是一个简写属性，用于 transition-property, transition-duration, transition-timing-function, 和 transition-delay。

• HTML知识点

1. 在切换到手机端打开页面时，页面会自动缩放（会默认手机屏幕980px），怎么阻止？？？
   添加一个<meta>:
   <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">

• 本节中用到的方法或技巧