Comentário: Ao fazer uma prancheta, usamos naturalmente a tela do HTML5 para alcançá -la. Na tela, podemos desenhar círculos, retângulos, linhas personalizadas, etc. Desta vez, usamos principalmente círculos e linhas para alcançá -lo. Apoiar a resposta a eventos de toque em HTML
A primeira coisa a notar é que não estamos desenhando com o mouse, mas usando os dedos no dispositivo de toque, como o iPad.
Para fazer uma prancheta, usamos naturalmente a tela do HTML5 para alcançá -la. Na tela, podemos desenhar círculos, retângulos, linhas personalizadas, etc. Desta vez, usamos principalmente círculos e linhas para alcançá -lo. A resposta aos eventos de toque é suportada no HTML.
OnTouchStart Touch Start
Swipe de toque de OnTouchmove
OnTouchend Touch End
Com esses eventos, é muito fácil desenharmos no navegador com os dedos.
Efeitos no iPad:
Ideia: Quando seu dedo tocar na tela, adicione um círculo à posição de toque do dedo no evento OnTouchStart; Quando seu dedo começar a deslizar, desenhe constantemente as linhas do ponto de toque anterior para o próximo ponto em OnTouchmove.
Html:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"></p><p> xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Canvas </title>
<meta name = "viewport" content = "largura = largura do dispositivo, scalable usuário = não">
</head>
<Body>
<VASLE>/CANVAS>
<script type = "text/javascript" src = "canvasscript.js" charset = "utf-8"> </script>
</body>
</html>
JS:
// Obtenha tela
var Canvas = document.getElementById ("Canvas");
// tela cheia
canvas.width = window.innerwidth;
canvas.Height = window.innerHeight;
// se ele suporta toque
var touchable = 'createTouch' no documento;
if (tocável) {
canvas.addeventListener ('touchstart', otechstart, false);
canvas.addeventListener ('touchmove', oTouchmove, false);
}
outro
{
alerta ("tocável é falso!");
}
// Last Touch Coordenates
var lastx;
var lasty; </p> <p> var ctx = canvas.getContext ("2D");
ctx.linewidth = 10; // a espessura do pincel
ctx.strokestyle = "#ff0000"; // cor de pincel </p> <p> // Touch Inicting Event
função otechstart (evento) {
event.preventDefault ();
lastx = event.Touches [0] .ClientX;
lasty = event.Touches [0] .Clienty;
desenhado (lastx, lasty); </p> <p>}
// Toque no evento deslizante
função oTouchMove (evento) {
tentar
{
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) {
alerta (err.Description);
} </p> <p>} </p> <p> // desenhe um círculo
função desenhada (x, y)
{
ctx.fillstyle = "#ff0000";
ctx.BeginPath ();
ctx.arc (x, y, 5,0, math.pi*2, verdadeiro);
ctx.closePath ();
ctx.fill ();
}
// Desenhe linhas
Drawline da função (startx, starty, endx, endy)
{
ctx.BeginPath ();
ctx.linecap = "redonda";
ctx.moveto (startx, starty);
ctx.lineto (endx, endy);
ctx.stroke ();
}
Pontos -chave:
ctx.linecap = rodada; Define a tampa do estilo no final da linha desenhada para um círculo. Isso é muito importante, caso contrário, haverá faixas quebradas em lugares onde o ângulo da linha muda bastante.
event.preventDefault (); cancela a ação padrão do evento. Este método deve ser ajustado durante o evento deslizante. Caso contrário, o evento deslizante padrão do navegador será acionado ao deslizar e o efeito suspenso da página ocorrerá, e você não poderá desenhá-lo.