canvas-demo plus

添加功能

• 适用于手机端
• 添加画笔颜色
• 添加保存功能

一、特性检测

//适配触屏设备

document.body.ontouchstart !== undefined

//特性检测
if(document.body.ontouchstart !== undefined){
            //触屏设备
            canvas.ontouchstart = function(){
                console.log('开始触摸')
            }
            canvas.ontouchmove = function(){
                console.log('触摸移动')
            }
            canvas.ontouchend = function(){
                console.log('完毕')
            }
}else{
            //非触屏设备
            添加鼠标点击事件
}

在移入类似鼠标事件的操作时，善用console.log(),比如此处可尝试输出x, y 到控制台，查看是否获取到正确值。

//移入后的代码

    function listenToUser(canvas){
        
        var using = false;
        var lastPoint = {x: undefined, y: undefined};

        //特性检测
        if(document.body.ontouchstart !== undefined){
            //触屏设备
            canvas.ontouchstart = function(event){
                console.log('开始触摸')
                //console.log(event)
                var x = event.touches[0].clientX;
                var y = event.touches[0].clientY;
                console.log(x,y)
                using = true;
        
                if(eraserEnabled){
                    context.clearRect(x-5, y-5, 10, 10);
                }else{
                    lastPoint = {'x': x,'y': y};
                    //drawCircle(x, y, 1);
                }
            }
            canvas.ontouchmove = function(){
                console.log('触摸移动')
                var x = event.touches[0].clientX;
                var y = event.touches[0].clientY;
                
                if(!using){return;}//判断提前
                
        
                if(eraserEnabled){
                    
                    context.clearRect(x-5, y-5, 10, 10);
                   
                    
                }else{
                    
                    var newPoint = {'x': x,'y': y};
                    //drawCircle(x, y, 1);
                    drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
            
                    //不停更新当前点，防止出现每个点都只和第一点连接
                    lastPoint = newPoint;
                    
                }
            }
            canvas.ontouchend = function(){
                console.log('完毕')
                using = false;
            }
        }else{
            //非触屏设备
            canvas.onmousedown = function(event){
           
            
                var x = event.clientX;
                var y = event.clientY;
                using = true;
        
                if(eraserEnabled){
                    context.clearRect(x-5, y-5, 10, 10);
                }else{
                    lastPoint = {'x': x,'y': y};
                    //drawCircle(x, y, 1);
                }
        
            }
          
            canvas.onmousemove = function(event){
                var x = event.clientX;
                var y = event.clientY;
                
                if(!using){return;}//判断提前
                
        
                if(eraserEnabled){
                    
                    context.clearRect(x-5, y-5, 10, 10);
                   
                    
                }else{
                    
                    var newPoint = {'x': x,'y': y};
                    //drawCircle(x, y, 1);
                    drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
            
                    //不停更新当前点，防止出现每个点都只和第一点连接
                    lastPoint = newPoint;
                    
                }
        
            }
        
            canvas.onmouseup = function(event){
                using = false;
            }
        }
   
    }

二、添加画笔橡皮图案

//去掉HTML中的<button>标签，引入icon.cn中的图标，并设置图标的样式和JS变换代码。

HTML
    <div id="actions" class="actions">
        <svg id="brush" class="icon" aria-hidden="true">
            <use xlink:href="#icon-pen2"></use>
        </svg>
        <svg id="eraser" class="icon" aria-hidden="true">
            <use xlink:href="#icon-eraser"></use>
        </svg>
        <!-- <button id="eraser">橡皮擦</button>
        <button id="brush">画笔</button> -->
    </div>

CSS
.actions svg{
    width: 1.5em;
    height: 1.5em;
}

/* .actions > #brush{
    display: none;
}

.actions.x > #brush{
    display: inline-block;
}

.actions.x > #eraser{
    display: none;
} */

JS
    var eraserEnabled = false;
    brush.onclick = function(){
        eraserEnabled = false;
    }
    eraser.onclick = function(){
        eraserEnabled = true;
    }
    // eraser.onclick = function(){

    //     eraserEnabled = true;
    //     actions.className = 'actions x';   
    // }
    // brush.onclick = function(){
    //     eraserEnabled = false;
    //     actions.className = 'actions';
    // }

三、添加选择的颜色块

1. 创建列表

HTML
<ol class="colors">
        <li id="red" class="red active"></li>
        <li id="green" class="green"></li>
        <li id="blue" class="blue"></li>
</ol>

2. 去掉默认样式，添加样式

CSS
.colors{
    position: fixed;
    top: 60px;
    left: 22px;
    /* border: 1px solid red; */
}

.colors > li{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    margin: 10px 0;
    transition-duration: 0.3s;
}

.colors > li.red{
    background: red;
}
.colors > li.green{
    background: green;
}
.colors > li.blue{
    background: blue;
}

.colors > li.active{
    box-shadow: 0 0 3px rgba(0, 0, 0, 1);
    transform: scale(1.2);
}

3. 添加JS，产生联动，使画笔获得填充色（实现点击切换颜色功能，主要是实现点击切换样式与填充色）

JS
    red.onclick = function(){
        context.fillStyle = 'red';
        context.strokeStyle = 'red';
        red.classList.add('active');
        green.classList.remove('active');
        blue.classList.remove('active');
    }
    green.onclick = function(){
        context.fillStyle = 'green';
        context.strokeStyle = 'green';
        green.classList.add('active');
        red.classList.remove('active');
        blue.classList.remove('active');
    }
    blue.onclick = function(){
        context.fillStyle = 'blue';
        context.strokeStyle = 'blue';
        blue.classList.add('active');
        green.classList.remove('active');
        red.classList.remove('active');
    }

四、添加粗细画线选择

HTML
<ol class="sizes">
        <li id="thin" class="thin"></li>
        <li id="thick" class="thick"></li>
</ol>

CSS
.sizes{
    position: fixed;
    right: 20px;
    top: 10px;
}
.sizes > li{
    margin: 20px 0;
}
.sizes > .thin{
    height: 0;
    width: 20px;
    border-top: 3px solid black;
}
.sizes > .thick{
    height: 0;
    width: 20px;
    border-top: 6px solid black;
}

JS
    thin.onclick = function(){
        lineWidth = 5;
    }
    thick.onclick = function(){
        lineWidth = 10;
    }

五、添加清除、保存功能

使用icon.cn下载图标，按要求加入HTML中。

HTML
<svg id="clear" class="icon" aria-hidden="true">
      <use xlink:href="#icon-clear"></use>
</svg>
<svg id="download" class="icon" aria-hidden="true">
      <use xlink:href="#icon-save"></use>
</svg>

在保存功能中先使用toDataURL获取画布数据，创建超链接，添加路径。

JS
    //清除全屏功能
    clear.onclick = function(){
        context.clearRect(0, 0, yyy.width, yyy.height);
    }
    //下载保存图片功能
    download.onclick = function(){
        var url = yyy.toDataURL('image/png');//拿到画面数据
        var a = document.createElement('a');
        document.body.appendChild(a);

        a.href = url;
        a.download = "我的作品";
        a.target = '_blank';
        a.click();
    }

六、局域网调试

为在手机端上快速调试：
快速debug---查看电脑网络的IP地址，替换到demo的网址上，然后手机端访问该网址，进行测试调试代码。