Canvas画图-鼠标涂鸦

3,895 阅读1分钟

之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环),后面又写了使用SVG实现的方法 一个比想象中更骚气的圆-svg实现, 这篇继续学习和Canvas有关的知识,这篇类似之前的一个总结,主要是用鼠标在Canvas上涂鸦,以及保存涂鸦为图片。

鼠标事件

整个原理比较简单,主要是监听mousedown,mousemove两个事件,转换成相应Canvas上的坐标,然后就是之前用的画线的知识了。这里注意如果是移动端,需要使用touchstarttouchmove事件。

首先是设置Canvas的宽高:


    var canvas = $("#canvas"),
        ctx = canvas[0].getContext('2d'),
        winWidth = $(window).width(),
        winHeight = $(window).height();

    canvas.attr('width',winWidth).attr("height",winHeight);

监听mousedown事件:


    canvas.on("mousedown",function(e){
        var sx = e.pageX - offset.left,  //做个换算以防万一
            sy = e.pageY - offset.top;

        running = "draw";
        ctx.beginPath();
        ctx.moveTo(sx,sy);
    });

这里主要是把起始点给设置到鼠标按下去的地方。

监听mousemove事件:


    canvas.on("mousemove", function(e){
        if(running == "draw"){
            toDraw(e.pageX-offset.left, e.pageY-offset.top)
        }
    });

这里主要是判断一下,如果是点了之后move的就开始去画线。

还要监听一下mouseup事件,用来清除按下去时设置的状态,防止没按就移动鼠标也会画线,如果是移动端,改成监听touchend事件:


    canvas.on("mouseup", function(e){
        running= "";
    });

最重要的toDraw方法:


    function toDraw(x, y){
        ctx.lineTo(x,y); // 画路径
        ctx.lineWidth = 5;
        ctx.strokeStyle = "#ff4444";
        ctx.stroke();   // 描边
        ctx.save();     // 保存状态
    }

这样基本上就实现了在Canvas上用鼠标涂鸦,思路还是比较简单。

保存涂鸦

涂鸦完之后我们我们可以把Canvas保存成图片,使用Canvas提供的toDataURL()方法。


    $("#save").click(function(){
        $("img").remove();

        var img = new Image();
        img.src = canvas[0].toDataURL("image/jpeg", 1);

        $("body").append(img);
    });

这里添加了一个叫save的按钮,然后使用了toDataURL()方法把Canvas保存为base64数据,然后弄个Image显示出来。

toDataURL方法默认是保存为png格式,这里使用的是保存为jpeg格式,质量设置为1,质量参数为0~1,越高质量越好,但是也越大。

事实上这里就这样保存jpeg格式的话是会有问题的,会发现底色是黑色的。原因是jpeg的接口本身不是很完善,当canvas没有填充颜色或者图片的时候,保存的jpeg由于是直接由png的alpha通道强制转换过来,所以在png的透明部分就会变成黑色。

解决方法倒也简单就是一开始画之前给Canvas填个白色底。


    ctx.fillStyle = '#fff';     
    ctx.fillRect(0,0,winWidth,winHeight);

当然也可以使用JPEGencoder来把png转成jpeg。

效果:

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2016/11/29/238178ed46ee134dd1655cd3989e2abc.gif~tplv-t2oaga2asx-image.image

完整代码:

github.com/bob-chen/ca…

参考

developer.mozilla.org/zh-CN/docs/…

www.cnblogs.com/hongru/arch…