Comentario: Al hacer un tablero de dibujo, naturalmente usamos el lienzo de HTML5 para lograrlo. En el lienzo podemos dibujar círculos, rectángulos, líneas personalizadas, etc. Esta vez usamos principalmente círculos y líneas para lograrlo. Respuesta de apoyo a los eventos táctiles en HTML
Lo primero a tener en cuenta es que no estamos dibujando con el mouse, sino que usamos nuestros dedos en el dispositivo táctil, como el iPad.
Para hacer un tablero de dibujo, usamos naturalmente los lienzos de HTML5 para lograrlo. En el lienzo podemos dibujar círculos, rectángulos, líneas personalizadas, etc. Esta vez usamos principalmente círculos y líneas para lograrlo. Los eventos de respuesta al tacto se admiten en HTML.
intouchstart touch comienzo
Ontouchmove touch swipe
End Touchend Touch
Con estos eventos, es muy fácil para nosotros atraer el navegador con nuestros dedos.
Efectos en el iPad:
Idea: cuando su dedo toque la pantalla, agregue un círculo a la posición táctil del dedo en el evento OnTouchStart; Cuando su dedo comience a deslizarse, dibuje constantemente líneas desde el punto de contacto anterior al siguiente punto en Ontouchmove.
HTML:
< xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> Canvas </title>
<Meta name = "Viewport" Content = "Width = Device-width, user-Scalable = no">
</ablo>
<Body>
<Canvas>/Canvas>
<script type = "text/javaScript" src = "canvasscript.js" charset = "utf-8"> </script>
</body>
</html>
JS:
// Obtener lienzo
var lienvas = document.getElementById ("Canvas");
// pantalla completa
Canvas.Width = Window.InnerWidth;
Canvas.Height = Window.InnerHeight;
// si admite el tacto
var touchable = 'createTouch' en el documento;
if (touchable) {
Canvas.addeventListener ('TouchStart', OnTouchStart, False);
Canvas.addeventListener ('Touchmove', OnTouchmove, False);
}
demás
{
alerta ("Touchable es falso!");
}
// las últimas coordenadas táctiles
var lastx;
var lasty; </p> <p> var ctx = canvas.getContext ("2d");
ctx.linewidth = 10; // El grosor del cepillo
ctx.strokestyle = "#FF0000"; // Color de pincel </p> <p> // Touch Start Event
function OnTouchStart (evento) {
event.preventDefault ();
LastX = Event.Touches [0] .clientx;
dILTY = Event.Touches [0] .Clienty;
dibujo (LastX, Lasty); </p> <p>}
// Touch Sliding Event
function OnTouchMove (evento) {
intentar
{
event.preventDefault ();
Drawline (LastX, Lasty, Event.Touches [0] .Clientx, Event.Touches [0] .Clienty);
LastX = Event.Touches [0] .clientx;
dILTY = Event.Touches [0] .Clienty;
}
Catch (err) {
alerta (err.description);
} </p> <p>} </p> <p> // dibuja un círculo
función dibujada (x, y)
{
ctx.fillstyle = "#FF0000";
ctx.beginpath ();
ctx.arc (x, y, 5,0, math.pi*2, verdadero);
ctx.ClosePath ();
ctx.fill ();
}
// dibujar líneas
Function DrawLine (StartX, Starty, EndX, Endy)
{
ctx.beginpath ();
ctx.linecap = "redondeo";
ctx.moveto (startx, starty);
ctx.lineto (endx, endy);
ctx.stroke ();
}
Puntos clave:
ctx.linecap = ronda; Establece la tapa de estilo al final de la línea dibujada a un círculo. Esto es muy importante, de lo contrario, habrá bandas rotas en lugares donde el ángulo de línea cambia enormemente.
event.preventDefault (); Cancela la acción predeterminada del evento. Este método debe ajustarse durante el evento deslizante. De lo contrario, el evento deslizante predeterminado del navegador se activará cuando se deslice, y el efecto desplegable de la página se producirá, y no podrá dibujarlo.