Introduction à l'utilisation de HTML5 pour créer une planche à dessin_Compétences du didacticiel HTML5

La première chose à noter est que vous ne dessinez pas avec une souris, mais avec vos doigts sur un appareil tactile, comme un iPad.

Pour réaliser une planche à dessin, utilisez naturellement un canevas HTML5 pour la réaliser. Dans Canvas, nous pouvons dessiner des cercles, des rectangles, des lignes personnalisées, etc. Cette fois, j'utilise principalement le dessin de cercles et de lignes pour y parvenir. La réponse aux événements tactiles est prise en charge en HTML.

onTouchStart Démarrage tactile

diapositive tactile onTouchMove

onTouchEnd Touchez la fin

Avec ces événements, il nous est très simple de dessiner avec nos doigts dans le navigateur.

Effet sur IPAD :

Idée : Lorsque le doigt touche l'écran, ajoutez un cercle à la position où le doigt touche dans l'événement onTouchStart, lorsque le doigt commence à glisser, déplacez-vous continuellement du point de contact précédent au suivant ; dans onTouchMove Une ligne pointillée.

HTML :

Copier le code

Le code est le suivant :

gt ;≪ /p>

JS :

Copier le code

Le code est le suivant :

//get canvas
var canvas = document.getElementById("canvas");
//full screen
canvas.width= window.innerWidth ;
canvas.height=window.innerHeight;
//Le toucher est-il pris en charge
var touchable = 'createTouch' dans le document;
if (touchable) {
canvas.addEventListener ('touchstart' , onTouchStart, false);
canvas.addEventListener('touchmove', onTouchMove, false);
}
else
{
alert("touchable est faux !") ;
}
//Coordonnées du dernier toucher
var lastX;
var lastY;

var ctx =canvas.getContext("2d");
ctx.lineWidth=10;//Épaisseur du pinceau
ctx.strokeStyle="#FF0000";//Couleur du pinceau

//Événement de démarrage tactile
function onTouchStart(event) {
event.preventDefault();
lastX=event.touches[0].clientX;
lastY=event.touches[ 0].clientY;
drawRound(lastX,lastY);

}
//Événement coulissant tactile
function onTouchMove(event) {
try
{
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){
alert( err.description);
}

}

//Dessiner un cercle
function drawRound(x,y)
{
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc ( x,y,5,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
//Tracer une ligne
function drawLine(startX,startY,endX,endY)
{
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(startX,startY);
ctx .lineTo(endX,endY);
ctx.AVC();
}

Points clés :

ctx.lineCap="round"; Définissez le capuchon de style à la fin de la ligne tracée pour qu'il soit rond. Ceci est très critique, sinon il y aura des ruptures aux endroits où l'angle de la ligne change considérablement.

event.preventDefault(); Annule l'action par défaut de l'événement. Cette méthode doit être appelée dans l'événement glissant. Sinon, l'événement de glissement par défaut du navigateur sera déclenché lors du glissement, la page sera déroulée vers le bas et vous ne pourrez pas dessiner.