专栏首页程序员的诗和远方Canvas画图-鼠标涂鸦

Canvas画图-鼠标涂鸦

之前写了一篇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://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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 20180722_ARTS_week04

    这题寻找两个已经排好序的数组的中值,一开始思路比较简单,两个数组合一起,然后排个序就很容易找到中值了。

    Bob.Chen
  • Mac上搭建一个干净的TensorFlow环境

    作为一个小前端,最近想折腾下深度学习方面的东西,这不 TensorFlow 刚发布了 1.0 嘛。于是就想在我的 Mac Book 上跑一跑。

    Bob.Chen
  • 搭建安卓开发环境(Android Studio)

    最近想用业余时间学习一下android,教程,书本上以eclipse+adt居多,实际搜索一下,现在android studio好评还是比较多的,而且是goo...

    Bob.Chen
  • ndk代码支持断点调试

    背景 android的ndk代码编写一直被认为是很痛苦的一件事情,除了android程序员对c++的陌生外,还有一个主要原因是无法断点调试。无法断点调试很难发现...

    MelonTeam
  • Nginx域名解析流程,源码分析

    nginx在做正向代理、反向代理的时候,或upstream使用域名的时候,要做频繁的域名解析,为了更快的响应,nginx有一套自己的域名解析过程

    李俊鹏
  • 奋斗的小蜗牛

    传说中能站在金字塔顶的只有两种动物,一种是鹰,一种是蜗牛。一只小蜗牛听了这个传说后,大受鼓舞,立志要爬上金字塔。为了实现自己的梦想,蜗牛找到了老鹰,老鹰告诉它金...

    书童小二
  • MySQL从删库到跑路_高级(七)——事务和锁

    A、原子性(Atomicity) 表示组成一个事务的多个数据库操作是一个不可分隔的原子单元,只有所有的操作执行成功,整个事务才提交,事务中任何一个数据库操作失败...

    良月柒
  • Salesforce发布可分析社交媒体内容的人工智能工具

    就在CrimsonHexagon推出一项采用人工智能分析发布在社交网络上的媒体内容一周时间后,另外一个重要参与者也加入其中。

    臭豆腐
  • 基于深度强化学习的比特币自动交易项目(区块链系列5)

    量化投资与机器学习微信公众号
  • 写了3年前端依然原地踏步,你可能犯了这10个错误

    1.只看教程,不动手实战 这个可以说是学习的最大的一忌,也是提醒过最多的一个注是事项!网上的教程有许多许多,各个语言,各个知识点,各方面的都有,java,htm...

    BestSDK

扫码关注云+社区

领取腾讯云代金券