Home > Article > Web Front-end > How to use canvas to create a useful graffiti drawing board
How to use canvas to create a useful graffiti drawing board
- php中世界最好的语言Original
- 2018-03-12 14:50:172576browse
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>Note: Because the events of the mouse and the touch screen are different, you can get it by just hovering the mouse over the canvas. The touch screen needs to be pressed, and the Event object returned is also different. 2. Control whether to drawControlling whether to draw is actually very simple. It is to control <!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>## by judging the value of the self-defined variabledrawing during different events. #3. Line drawing
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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use js-xlsx to merge cellsNext article：How to use js-xlsx to merge cells
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills