This time I will show you how to use canvas to make a useful graffiti drawing board. What are the precautions for using canvas to make a useful graffiti drawing board? The following is a practical case, let’s take a look. . Get the cursor coordinates in canvas
The code to get the coordinates is very simple:
<!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><!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>The code for line drawing is also very simple
....//线条绘制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();
}
....Integrate the line drawing code into the event:
<!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. Line drawing optimization
It's fine when the width of the drawn line is relatively small, but once it is thicker, there will be writing problems:
At this time, just slightly change the drawing code
....//线条绘制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();
}
....I believe I read it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to use s-xlsx to merge cellsjs-xlsx reads xlsx files Detailed explanation of asynchronousHow to use s-xlsx to import and export Excel files (Part 2)The above is the detailed content of How to use canvas to create a useful graffiti drawing board. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
