代码效果
代码地址
实现逻辑
使用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。这篇博客也只是为了记录一下,自己的一点激情(哈哈)。当然,你也可以做更多的修改,比如加个按钮作为调整画笔的粗细,画笔的颜色,对已有图片的涂鸦等等。