canvas写字板

代码效果

代码地址

demo地址

实现逻辑

使用canvas 简单实现写字功能并保存为图片 这是一个简单的写字板，主要有画笔和橡皮两种形态，进入也页面是默认使用画笔。

  function drawDot(x, y) {
        context.beginPath();
        if(eraserflag==1){
            linewidth=20;
        }else {
            linewidth=10;
        }
        context.arc(x, y, linewidth, 0, 2 * Math.PI);
        if(eraserflag==1){
            context.fillStyle = 'rgb(255,255,255)';
        }else{
            context.fillStyle = 'rgb(' + getrandom1() + ',' + getrandom2() + ',' + getrandom3() + ')';
        }

        context.fill();
        context.closePath();
    }

实现起来很简单，鼠标按下为开始讯息，在鼠标移动的时候记录鼠标的位置，然后使用canvas的画图功能来实现每个点的绘画， 这样也就形成了所看到的所谓的画笔。

当然，能画也要能擦，橡皮擦的功能实现原理是一样的，只不过画笔的颜色变成了白色，线条宽度也相应的要大一些，以看起来像那么回事（……），橡皮和画笔之间 只需要一个简单的标志符号来区别就可以了。

if (/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
        if (window.location.href.indexOf("?mobile") < 0) {
            clientflag = 1;//移动端
        } else {
            clientflag = 0;//pc端
        }
    }

代码做了简单的移动端和pc端的区别，主要是获取鼠标位置和屏幕按下位置的区别。

function download(type) {
        //设置保存图片的类型
        var imgdata = canvas.toDataURL(type);
        //将mime-type改为image/octet-stream,强制让浏览器下载
        var fixtype = function (type) {
            type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
            var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
        }
        imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
        //将图片保存到本地
        var saveFile = function (data, filename) {
            var link = document.createElement('a');
            link.href = data;
            link.download = filename;
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            link.dispatchEvent(event);
        }
        var filename = new Date().toLocaleDateString() + '.' + type;
        saveFile(imgdata, filename);
    }

这里从网上找到了一个保存canvas为png图片的功能，我也很贪心的加在了我的程序里面，原理很简单，也可以改变存储图片的类型，但是这个代码只是用于chrome浏览器， 其他的浏览器兼容性我没有考虑，毕竟我的目的并不是为了保存图片，所以这里就不做考究了。相信网上应该有很多大神能够解决这个问题。

小结

今天在浏览网页的时候大仙有大神画了个两点连线图，由此引发了自己想通过鼠标位置实现写字板的这样一个简单的demo。这篇博客也只是为了记录一下，自己的一点激情（哈哈）。当然，你也可以做更多的修改，比如加个按钮作为调整画笔的粗细，画笔的颜色，对已有图片的涂鸦等等。