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 条评论
登录 后参与评论

相关文章

来自专栏MasiMaro 的技术博文

对话框伸缩功能的实现

对话框的伸缩功能是指当触发某一操作时只显示部分对话框的内容,再次触发时显示全部的对话框范围,就比如画图软件上的选择颜色对话框,我们可以使用系统预定义的颜色,也可...

1212
来自专栏瞎说开发那些事

RPA与Excel(DataTable)

方法: 直接调用invokeCode,入参为已定义好的DataTable,出参为去重后的DataTable,代码如下

1272
来自专栏AndroidTv

【Android】属性动画的使用理解

属性动画的教程网上已经特别多了,本篇也不打算再去各种详解知识点,主要就是记录题主学习属性动画时的碰到的一些困惑,以及后来自己的理解。如果有人也碰到相似的问题,正...

3023
来自专栏coding for love

CSS进阶09-定位体系差异分析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1023
来自专栏格子的个人博客

Markdown语法学习记录

鉴于每次写博客,写文章的时候,总是要重复去查询Markdown的相关语法,这种闹心的感觉我再也不要了。

1112
来自专栏24K纯开源

用Qt写软件系列三:一个简单的系统工具之界面美化

前言      在上一篇中,我们基本上完成了主要功能的实现,剩下的一些导出、进程子模块信息等功能,留到后面再来慢慢实现。这一篇来讲述如何对主界面进行个性化的定制...

6137
来自专栏前端新视界

给单元素艺术添加动画

原文:Animating Single Div Art 翻译:nzbin 导读:学习工具的最好的方法就是尝试新技术,本文通过“单元素艺术”介绍了 CSS 变量的...

2295
来自专栏GIS讲堂

Geoserver2.11矢量切片与OL3中的调用展示

GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片,无法进行交互。于是又引入了矢量图层用来显示矢量点线面,...

1993
来自专栏一“技”之长

设计iOS中随系统键盘弹收和内容文字长度自适应高度的文本框

    文本输入框是多数与社交相关的app中不可或缺的一个控件,这些文本输入框应该具备如下的功能:

1042
来自专栏Rovo89

解释一下为什么我很少用jQuery

2334

扫码关注云+社区

领取腾讯云代金券