Maison > Article > interface Web > Comment utiliser la toile pour créer une planche à dessin de graffiti utile
Comment utiliser la toile pour créer une planche à dessin de graffiti utile
- php中世界最好的语言original
- 2018-03-12 14:50:172575parcourir
Cette fois, je vais vous montrer comment utiliser la toile pour créer une planche à dessin pour graffitis utile. Quelles sont les précautions pour utiliser la toile pour créer une planche à dessin pour graffitis utile. jetez un oeil. Obtenez les coordonnées du curseur dans le canevas
Le code pour obtenir les coordonnées est très 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>Remarque : les événements de la souris et de l'écran tactile étant différents, vous pouvez obtenir en passant simplement la souris sur le canevas. Maintenant, il faut appuyer sur l'écran tactile et l'objet Event renvoyé est également différent.
2. Contrôler s'il faut dessiner
Contrôler s'il faut dessiner est en fait très simple, c'est-à-dire juger la valeur de la variable auto-définie dessiner à différents événements à contrôler
<!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. Dessin au trait Le code du dessin au trait est également très 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();
}
....Intégrez le code du dessin au trait dans l'événement : <!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. Optimisation des lignes de dessinCe n'est pas grave lorsque la largeur de la ligne tracée est relativement petite, mais une fois qu'elle est plus épaisse, il y aura des problèmes d'écriture :Pour le moment, juste changez légèrement le code de dessin....//线条绘制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();
}
....Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! Lecture connexe :
Comment utiliser s-xlsx pour fusionner des cellules
js-xlsx lit les fichiers xlsx Explication détaillée d'asynchrone
Comment utiliser s-xlsx pour importer et exporter des fichiers Excel (Partie 2)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser js-xlsx pour fusionner des cellulesArticle suivant：Comment utiliser js-xlsx pour fusionner des cellules
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript