【JavaScript】基于H5 canvas实现的画板绘图工具(类似你画我猜)——整合颜色选取、保存图片到本地功能
2017-05-01 01:27
1231 查看
本来想尝试用做一个网页版的美图秀秀,可以导入的对图片进行处理,还有制作一些模板可以快速生成人物的表情包,但是做着做着,发现太耗时间了。结果最终只是简单做了一个基于 canvas 的画板。
github地址:https://github.com/linhongbijkm/canvasPainter
在线DEMO:https://linhongbijkm.github.io/canvasPainter/cvs.html
单纯实现 canvas 绘画功能还是比较简单的,以下我只大概说一下绘画功能的实现,至于页面中还包括颜色选择器、图像保存到本地的功能,请到 github 代码仓库下载下来看看。
一、canvas 标签
这个标签定义了一个画布,然后是要用 JavaScript 来调用浏览器 API 来在画布上绘图,所以第一步,就是在页面上加入 canvas 标签;
二、读取画布
跟 JS 获取其他元素一样,根据 canvas 标签定义的 id 值,用原生函数来选取 canvas 元素,然后调用 getContext('2d') 获取画布环境对象,之后对画布绘图的 API 都由环境对象来调用;
三、定义画笔的颜色和粗细
四、监听鼠标点下时事件
鼠标一点下,就开始一次绘画,画笔的起始点是当前鼠标位置,同时设置画笔的属性;
五、监听鼠标移动和松开事件
为了节省性能,在鼠标松开时候,取消鼠标按住和移动的监听,也就是只有鼠标按下时才监听鼠标移动和松开事件;
整合以上五点,单纯绘图功能的代码如下:
(注:不包含颜色选取、橡皮擦、清空画布功能。如果需要完整版,请到github下载,地址在本文最前面)
<body>
<canvas id="canvas" width="800px" height="600px"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var cvs = canvas.getContext('2d');
var penWeight = 1; //画笔粗细
var penColor = '#f00'; //画笔颜色
canvas.onmousedown = function(e){
/*找到鼠标(画笔)的坐标*/
var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
cvs.beginPath(); //开始本次绘画
cvs.moveTo(start_x, start_y); //画笔起始点
/*设置画笔属性*/
cvs.lineCap = 'round';
cvs.lineJoin ="round";
cvs.strokeStyle = penColor; //画笔颜色
cvs.lineWidth = penWeight; //画笔粗细
canvas.onmousemove = function(e){
/*找到鼠标(画笔)的坐标*/
var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
cvs.lineTo(move_x, move_y); //根据鼠标路径绘画
cvs.stroke(); //立即渲染
}
canvas.onmouseup = function(e){
cvs.closePath(); //结束本次绘画
canvas.onmousemove = null;
canvas.onmouseup = null;
}
}
</script>
运行一下代码看看,比完整版简陋很多:
github地址:https://github.com/linhongbijkm/canvasPainter
在线DEMO:https://linhongbijkm.github.io/canvasPainter/cvs.html
单纯实现 canvas 绘画功能还是比较简单的,以下我只大概说一下绘画功能的实现,至于页面中还包括颜色选择器、图像保存到本地的功能,请到 github 代码仓库下载下来看看。
一、canvas 标签
这个标签定义了一个画布,然后是要用 JavaScript 来调用浏览器 API 来在画布上绘图,所以第一步,就是在页面上加入 canvas 标签;
<body> <canvas id="canvas" width="800px" height="600px"></canvas> </body>
二、读取画布
跟 JS 获取其他元素一样,根据 canvas 标签定义的 id 值,用原生函数来选取 canvas 元素,然后调用 getContext('2d') 获取画布环境对象,之后对画布绘图的 API 都由环境对象来调用;
<script> var canvas = document.getElementById('canvas'); var cvs = canvas.getContext('2d'); </script>
三、定义画笔的颜色和粗细
var penWeight = 1; //画笔粗细 var penColor = '#f00'; //画笔颜色
四、监听鼠标点下时事件
鼠标一点下,就开始一次绘画,画笔的起始点是当前鼠标位置,同时设置画笔的属性;
canvas.onmousedown = function(e){ /*找到鼠标(画笔)的坐标*/ var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft; var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop; cvs.beginPath(); //开始本次绘画 cvs.moveTo(start_x, start_y); //画笔起始点 /*设置画笔属性*/ cvs.lineCap = 'round'; cvs.lineJoin ="round"; cvs.strokeStyle = penColor; //画笔颜色 cvs.lineWidth = penWeight; //画笔粗细 /*监听鼠标移动事件*/ /*监听鼠标松开事件*/ }
五、监听鼠标移动和松开事件
为了节省性能,在鼠标松开时候,取消鼠标按住和移动的监听,也就是只有鼠标按下时才监听鼠标移动和松开事件;
canvas.onmousemove = function(e){ /*找到鼠标(画笔)的坐标*/ var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft; var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop; cvs.lineTo(move_x, move_y); //根据鼠标路径绘画 cvs.stroke(); //立即渲染 } canvas.onmouseup = function(e){ cvs.closePath(); //结束本次绘画 canvas.onmousemove = null; canvas.onmouseup = null; }
整合以上五点,单纯绘图功能的代码如下:
(注:不包含颜色选取、橡皮擦、清空画布功能。如果需要完整版,请到github下载,地址在本文最前面)
<body>
<canvas id="canvas" width="800px" height="600px"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var cvs = canvas.getContext('2d');
var penWeight = 1; //画笔粗细
var penColor = '#f00'; //画笔颜色
canvas.onmousedown = function(e){
/*找到鼠标(画笔)的坐标*/
var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
cvs.beginPath(); //开始本次绘画
cvs.moveTo(start_x, start_y); //画笔起始点
/*设置画笔属性*/
cvs.lineCap = 'round';
cvs.lineJoin ="round";
cvs.strokeStyle = penColor; //画笔颜色
cvs.lineWidth = penWeight; //画笔粗细
canvas.onmousemove = function(e){
/*找到鼠标(画笔)的坐标*/
var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
cvs.lineTo(move_x, move_y); //根据鼠标路径绘画
cvs.stroke(); //立即渲染
}
canvas.onmouseup = function(e){
cvs.closePath(); //结束本次绘画
canvas.onmousemove = null;
canvas.onmouseup = null;
}
}
</script>
运行一下代码看看,比完整版简陋很多:
相关文章推荐
- [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现
- 基于jquery实现图片上传本地预览功能
- JavaScript实现类似Title Alt功能并且可以显示图片。
- 基于JavaScript实现图片点击弹出窗口而不是保存
- unicode 转码工具可以实现类似jdk中的anscii的功能(JavaScript)
- Android实现拍照,以及从相册选择图片裁剪功能同时保存在本地
- javaCV开发详解之4:转流器实现(也可作为本地收流器、推流器,新增添加图片及文字水印,视频图像帧保存),实现rtsp/rtmp/本地文件转发到rtmp流媒体服务器(基于javaCV-FFMPEG)
- 基于Android实现保存图片到本地并可以在相册中显示出来
- javaCV开发详解之4:转流器实现(也可作为本地收流器、推流器,新增添加图片及文字水印,视频图像帧保存),实现rtsp/rtmp/本地文件转发到rtmp流媒体服务器(基于javaCV-FFMPEG)
- JavaScript实现类似Title Alt功能并且可以显示图片。
- 【iOS开发-85】利用touch触摸事件:实现画板画画、撤销、清屏以及图片保存功能
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
- Android中保存图片到本地功能实现
- 基于JavaScript实现图片点击弹出窗口而不是保存
- javaCV开发详解之4:转流器实现(也可作为本地收流器、推流器,新增添加图片及文字水印,视频图像帧保存),实现rtsp/rtmp/本地文件转发到rtmp流媒体服务器(基于javaCV-FFMPEG)
- canvas.toDataUrl 画布导出功能(将canvas画板保存为图片格式)!
- JavaScript实现类似TitleAlt功能并且可以显示图片。
- Android中保存图片到本地功能实现 .
- 基于JavaScript实现本地图片预览
- 基于HTML5 Canvas和jQuery 的绘图工具的实现