web大作业（7）图片涂鸦功能的实现

作业要求能上传一张图片并在图片上进行b标注或绘画，可以用HTML5自带的canvas实现，首先是body部分：

<div class="paint">
        <canvas id="canvas" width="500" height="400" style="border:1px solid #c3c3c3;"></canvas>
</div>
<input accept="image/*"  type="file" id="uploadIMG"  onchange="btnUploadFile(event)"/>

首先我们要上传一张照片，并在canvas中显示，以下为js代码：

function btnUploadFile(e,type){
        var files = e.target.files;
        var file = files[0];
        if (!/\/(?:jpeg|jpg|png)/i.test(file.type)){
            return;
        }
        
        var reader = new FileReader();
        reader.onload = function() { 
            var result = this.result;  
            var img=new Image()
            img.src=result;
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            //console.log(result)
            img.onload = function(){
                context.drawImage(img,0,0,500,400);
            }
        };
        reader.readAsDataURL(file);    
    }

然后是涂鸦功能的实现：

window.onload=function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        paint(context);
    }
    function paint(context){
        var temp = false;
        $("canvas").mousedown(function(event){
            temp=true;
            var x = e.pageX-8;
            var y = e.pageY-8;
            context.moveTo(x,y);
        })
        $("canvas").mousemove(function(e){
            var x = e.pageX-8;
            var y = e.pageY-8;
            //$("#info").html("( "+x+" , "+y+" )");
            if(temp){
                context.lineTo(x,y);
                context.stroke();
            }else{
                context.beginPath()
            }
        })
        $("canvas").mouseup(function(e){
            temp=false;
        })
    }

这里我调试了好久，发现只有当确认鼠标松开时随时beginPath，才能保证第一次松开和第二次点击拖动画出来的是两根线，否则这两根线会自动首尾相连。