Canvas画图-鼠标涂鸦

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

鼠标事件

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

首先是设置Canvas的宽高：

代码语言：javascript复制

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

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

监听mousedown事件：

代码语言：javascript复制

    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事件：

代码语言：javascript复制

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

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

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

代码语言：javascript复制

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

最重要的toDraw方法：

代码语言：javascript复制

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

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

保存涂鸦

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

代码语言：javascript复制

    $("#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填个白色底。

代码语言：javascript复制

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

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

效果：

完整代码：

https://github.com/bob-chen/canvas-demo/blob/master/basic/drawbymouse.html

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

http://www.cnblogs.com/hongru/archive/2012/01/14/2322540.html

svg

0 人点赞