Commentaire: Lors de la fabrication d'une planche à dessin, nous utilisons naturellement la toile de HTML5 pour y parvenir. En toile, nous pouvons dessiner des cercles, des rectangles, des lignes personnalisées, etc. Cette fois, nous utilisons principalement des cercles et des lignes pour y parvenir. Soutenir la réponse aux événements tactiles dans HTML
La première chose à noter est que nous ne dessinons pas avec la souris, mais en utilisant nos doigts sur le périphérique tactile, comme l'iPad.
Pour faire une planche à dessin, nous utilisons naturellement la toile de HTML5 pour y parvenir. En toile, nous pouvons dessiner des cercles, des rectangles, des lignes personnalisées, etc. Cette fois, nous utilisons principalement des cercles et des lignes pour y parvenir. La réponse aux événements Touch est prise en charge dans HTML.
Ontouchstart Touch Start
Ontouchmove Touch Swipe
ONTOUCHENnd Touch End
Avec ces événements, il est très facile pour nous de dessiner dans le navigateur avec nos doigts.
Effets sur iPad:
Idée: lorsque votre doigt touche l'écran, ajoutez un cercle à la position tactile du doigt dans l'événement OntouchStart; Lorsque votre doigt commence à glisser, tracez constamment des lignes du point de contact précédent au point suivant dans Ontouchmove.
HTML:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> </p><p><html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<Title> Canvas </Title>
<meta name = "Viewport" content = "width = device-width, user-scalable = no">
</ head>
<body>
<lebvas> / canvas>
<script type = "text / javascript" src = "canvasscript.js" charset = "utf-8"> </ script>
</docy>
</html>
JS:
// Obtenez une toile
var canvas = document.getElementById ("canvas");
// plein écran
canvas.width = window.innerwidth;
canvas.height = window.innerHeight;
// s'il prend en charge le toucher
var touchable = 'createTouch' dans le document;
if (touchable) {
canvas.addeventListener («TouchStart», OntouchStart, false);
canvas.addeventListener ('TouchMove', Ontouchmove, false);
}
autre
{
alert ("Touchable est faux!");
}
// COORDIONS DE TACLE DERNIÈRE
var lastx;
var lasty; </p> <p> var ctx = canvas.getContext ("2d");
ctx.linewidth = 10; // l'épaisseur de la brosse
ctx.strokestyle = "# ff0000"; // Couleur de pinceau </p> <p> // Touch Start Event
fonction ontouchstart (événement) {
event.PreventDefault ();
lastX = event.touches [0] .ClientX;
lasty = event.touches [0] .Clienty;
DrawRound (LastX, Lasty); </p> <p>}
// touchez l'événement glissant
fonction Ontouchmove (événement) {
essayer
{
event.PreventDefault ();
Drawline (LastX, Lasty, Event.Touches [0] .ClientX, Event.Touches [0] .Clienty);
lastX = event.touches [0] .ClientX;
lasty = event.touches [0] .Clienty;
}
catch (err) {
alerte (err.description);
} </p> <p>} </p> <p> // Dessinez un cercle
Fonction Drawround (x, y)
{
ctx.fillStyle = "# ff0000";
ctx.beginPath ();
ctx.arc (x, y, 5,0, math.pi * 2, true);
ctx.closepath ();
ctx.fill ();
}
// dessine des lignes
Fonction Drawline (Startx, Starty, Endx, Endy)
{
ctx.beginPath ();
ctx.linecap = "rond";
ctx.moveto (startx, starty);
ctx.lineto (endx, endy);
ctx.stroke ();
}
Points clés:
ctx.linecap = rond; Définit le capuchon de style à la fin de la ligne dessinée vers un cercle. Ceci est très important, sinon il y aura des bandes cassées dans des endroits où l'angle de ligne change considérablement.
event.PreventDefault (); annule l'action par défaut de l'événement. Cette méthode doit être ajustée pendant l'événement de glissement. Sinon, l'événement de glissement par défaut du navigateur sera déclenché lors du glissement, et l'effet déroulant Page se produira et vous ne pourrez pas le dessiner.