如何使用canvas来制作好用的涂鸦画板

这次给大家带来如何使用canvas来制作好用的涂鸦画板，使用canvas来制作好用的涂鸦画板的注意事项有哪些，下面就是实战案例，一起来看一下。在canvas中获取光标坐标

获取坐标的代码很简单:

nbsp;html>                       *{margin: 0;padding: 0}                        var canvas = document.getElementById('board');        var context = canvas.getContext('2d');        var current = {            color: 'black',// 0) {                var touch = e.touches[0];                return { x: touch.pageX, y: touch.pageY };            }            return { x: e.clientX, y: e.clientY };        }        //鼠标移动        function onMouseMove(e) {            var p = getPoint(e);            document.getElementById("point").innerHTML=p.x+"-"+p.y;        }        canvas.width = 600;        canvas.height = 300;         canvas.addEventListener('mousemove', onMouseMove, false); //<==兼容PC        canvas.addEventListener('touchmove', onMouseMove, false);//<===兼容安卓或其他系统    

登录后复制

注意:因为鼠标与触摸屏的事件是不一样的,鼠标只要悬浮与canvas上就可以获取到了,而触摸屏是需要按下的,并且所返回的 Event 对象也是不一样的。

2.控制是否绘制

控制是否绘制其实很简单,就是在不同事件时判断自定义变量drawing的值来控制

nbsp;html>                        *{margin: 0;padding: 0}                        var canvas = document.getElementById('board');        var context = canvas.getContext('2d');        var current = {            color: 'black',//<===画笔颜色配置            width: 1//线条宽度         };        var drawing = false;// 0) {                var touch = e.touches[0];                return { x: touch.pageX, y: touch.pageY };            }            return { x: e.clientX, y: e.clientY };        }         //鼠标按下         function onMouseDown(e) {                drawing = true;             }            //鼠标弹起            function onMouseUp(e) {                if (!drawing) { return; }                drawing = false;             }        //鼠标移动        function onMouseMove(e) {            if (!drawing) { return; }            var p = getPoint(e);            document.getElementById("point").innerHTML=p.x+"-"+p.y;        }        canvas.width = 600;        canvas.height = 300;         canvas.addEventListener('mousedown', onMouseDown, false);        canvas.addEventListener('mouseup', onMouseUp, false);        canvas.addEventListener('mouseout', onMouseUp, false);        canvas.addEventListener('mousemove', onMouseMove, false);        canvas.addEventListener('touchstart', onMouseDown, false);        canvas.addEventListener('touchend', onMouseUp, false);        canvas.addEventListener('touchmove', onMouseMove, false);    

登录后复制

3.线条绘制

线条绘制的代码也是很简单的

....//线条绘制function drawLine(x0, y0, x1, y1, color, width) {    context.beginPath();    context.moveTo(x0, y0);    context.lineTo(x1, y1);    context.strokeStyle = color;    context.lineWidth = width;     context.stroke();    context.closePath();}....

登录后复制

将绘制线条代码整合到事件中:

nbsp;html>                                    var canvas = document.getElementById('board');        var context = canvas.getContext('2d');        var current = {            color: 'black',//<===画笔颜色配置            width: 1//线条宽度         };        var drawing = false;// 0) {                var touch = e.touches[0];                return { x: touch.pageX, y: touch.pageY };            }            return { x: e.clientX, y: e.clientY };        }        //线条绘制        function drawLine(x0, y0, x1, y1, color, width) {            context.beginPath();            context.moveTo(x0, y0);            context.lineTo(x1, y1);            context.strokeStyle = color;            context.lineWidth = width;             context.stroke();            context.closePath();        }        //鼠标按下        function onMouseDown(e) {            drawing = true;            //记录按下点            var p = getPoint(e);            current.x = p.x;            current.y = p.y;        }        //鼠标弹起        function onMouseUp(e) {            if (!drawing) { return; }            drawing = false;            //绘制结束点            var p = getPoint(e);            drawLine(current.x, current.y, p.x, p.y, current.color, current.width);        }        //鼠标移动        function onMouseMove(e) {            if (!drawing) { return; }            var p = getPoint(e);            document.getElementById("point").innerHTML = p.x + "-" + p.y;            //移动绘制            drawLine(current.x, current.y, p.x, p.y, current.color, current.width);            current.x = p.x;            current.y = p.y;        }        canvas.width = 600;        canvas.height = 300;        canvas.addEventListener('mousedown', onMouseDown, false);        canvas.addEventListener('mouseup', onMouseUp, false);        canvas.addEventListener('mouseout', onMouseUp, false);        canvas.addEventListener('mousemove', onMouseMove, false);        canvas.addEventListener('touchstart', onMouseDown, false);        canvas.addEventListener('touchend', onMouseUp, false);        canvas.addEventListener('touchmove', onMouseMove, false);    

登录后复制

4.绘制线条优化

当绘制线条宽度比较小的时候还好,一旦比较粗就会有写问题:

这时只要稍微改一下绘制的代码就行了

....//线条绘制function drawLine(x0, y0, x1, y1, color, width) {    context.beginPath();    context.moveTo(x0, y0);    context.lineTo(x1, y1);    context.strokeStyle = color;    context.lineWidth = width;     //-----加入-----    context.lineCap = "round";    context.lineJoin = "round";    //-----加入-----    context.stroke();    context.closePath();}....

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

相关阅读：

如何使用s-xlsx之合并单元格

js-xlsx读取xlsx文件的异步详解

如何使用s-xlsx实现Excel 文件导入和导出（下）

以上就是如何使用canvas来制作好用的涂鸦画板的详细内容，更多请关注【创想鸟】其它相关文章！