Heim > Artikel > Web-Frontend > So erstellen Sie mit Leinwand ein nützliches Graffiti-Zeichenbrett
So erstellen Sie mit Leinwand ein nützliches Graffiti-Zeichenbrett
- php中世界最好的语言Original
- 2018-03-12 14:50:172551Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie aus Leinwand ein nützliches Graffiti-Zeichenbrett herstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von Leinwand, um ein nützliches Graffiti-Zeichenbrett herzustellen? Schauen Sie mal rein. Holen Sie sich die Cursorkoordinaten im Canvas
Der Code zum Abrufen der Koordinaten ist sehr einfach:<!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>Hinweis: Da die Ereignisse der Maus und des Touchscreens unterschiedlich sind, können Sie sie abrufen Sie können sie ausführen, indem Sie einfach mit der Maus über die Leinwand fahren. Jetzt muss der Touchscreen gedrückt werden, und das zurückgegebene Ereignisobjekt ist ebenfalls anders. 2. Steuern, ob gezeichnet werden soll Die Steuerung, ob gezeichnet werden soll, ist eigentlich sehr einfach, das heißt, den Wert der selbstdefinierten Variablen zu beurteilen Zeichnung bei verschiedenen zu steuernden Ereignissen
3. Strichzeichnung<!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>Der Strichzeichnungscode ist ebenfalls sehr einfach
Integrieren Sie den Strichzeichnungscode in das Ereignis:....//线条绘制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();
}
....4. Optimierung der Zeichnungslinien<!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>Es ist in Ordnung, wenn die Breite der gezeichneten Linie relativ gering ist, aber sobald sie dicker ist, treten Schreibprobleme auf:
Zu diesem Zeitpunkt nur Ändern Sie den Zeichencode leicht.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!....//线条绘制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();
}
....Verwandte Lektüre:
So verwenden Sie s-xlsx zum Zusammenführen von Zellenjs-xlsx liest XLSX-Dateien Ausführliche Erklärung von asynchronSo verwenden Sie s-xlsx zum Importieren und Exportieren von Excel-Dateien (Teil 2)Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Leinwand ein nützliches Graffiti-Zeichenbrett. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie js-xlsx zum Zusammenführen von ZellenNächster Artikel：So verwenden Sie js-xlsx zum Zusammenführen von Zellen
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse