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

来源：欧宁财经

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

获取坐标的代码很简单:

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <style>
 *{margin: 0;padding: 0} </style></head><body>
 <canvas id="board" style="border: 1px #ccc solid;"></canvas>
 <span id="point"></span>
 <script>
 var canvas = document.getElementById('board'); var context = canvas.getContext('2d'); var current = { color: 'black',//<===画笔颜色配置
 width: 1//线条宽度 
 }; //获取点坐标
 function getPoint(e) { if (e.touches && e.touches.length > 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);//<===兼容安卓或其他系统
 </script></body></html>

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

2.控制是否绘制

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

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <style>
 *{margin: 0;padding: 0} </style></head><body>
 <canvas id="board" style="border: 1px #ccc solid;"></canvas>
 <span id="point"></span>
 <script>
 var canvas = document.getElementById('board'); var context = canvas.getContext('2d'); var current = { color: 'black',//<===画笔颜色配置
 width: 1//线条宽度 
 }; var drawing = false;//<===是否绘制
 //获取点坐标
 function getPoint(e) { if (e.touches && e.touches.length > 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); </script></body></html>

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();
}
....

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

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title></head><body>
 <canvas id="board" style="border: 1px #ccc solid;"></canvas>
 <span id="point"></span>
 <script>
 var canvas = document.getElementById('board'); var context = canvas.getContext('2d'); var current = { color: 'black',//<===画笔颜色配置
 width: 1//线条宽度 
 }; var drawing = false;//<===是否绘制
 //获取点坐标
 function getPoint(e) { if (e.touches && e.touches.length > 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); </script></body></html>

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();
}
....

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！