Введение в то, как использовать HTML5, чтобы сделать чертежную доску

Комментарий: При создании чертежной доски мы, естественно, используем холст HTML5 для его достижения. В холсте мы можем нарисовать круги, прямоугольники, пользовательские линии и т. Д. На этот раз мы в основном используем круги и линии для их достижения. Ответ поддержки на события Touch в HTML

Первое, что нужно отметить, это то, что мы не рисуем мышью, а используем пальцы на сенсорном устройстве, например, iPad.

Чтобы сделать чертежную доску, мы, естественно, используем холст HTML5 для его достижения. В холсте мы можем нарисовать круги, прямоугольники, пользовательские линии и т. Д. На этот раз мы в основном используем круги и линии для их достижения. Ответ на события Touch поддерживается в HTML.

OntouchStart Touch Start

Ontouchmove Touch Смайся

Ontouchend Touch End

С этими событиями нам очень легко нарисовать в браузере пальцами.

Влияние на iPad:

Идея: Когда ваш палец касается экрана, добавьте круг в прикосновение пальца в событии OnTouchStart; Когда ваш палец начинает скользить, постоянно рисуйте линии от предыдущей точки сенсорной точки до следующей точки в Ontouchmove.

HTML:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml">

<голова>

<title> Canvas </title>

<meta name = "viewport" content = "width = width Device, user scalbable = no">

</head>

<тело>

<Canvas>/Canvas>

<script type = "text/javascript" src = "canvasscript.js" charset = "utf-8"> </script>

</body>

</html>

JS:

// Получить холст

var canvas = document.getElementbyId ("canvas");

//полноэкранный

canvas.width = window.innerwidth;

canvas.height = window.innerheight;

// поддерживает ли он прикосновение

var touchable = 'createtouch' в документе;

if (touchable) {

canvas.addeventlistener ('touchstart', ontouchstart, false);

canvas.addeventlistener ('touchmove', ontouchmove, false);

}

еще

{

оповещение ("Touchable false!");

}

// координаты последнего прикосновения

var lastx;

var lasty; </p> <p> var ctx = canvas.getContext ("2d");

ctx.linewidth = 10; // толщина кисти

ctx.strokestyle = "#ff0000"; // brate color </p> <p> // start start event

function ontouchstart (event) {

Event.preventDefault ();

ancex = event.touches [0] .clientx;

lasty = event.touches [0] .clienty;

Результат (Lastx, Lasty); </p> <p>}

// Сострадательное скользящее событие

функция ontouchmove (event) {

пытаться

{

Event.preventDefault ();

Drawline (Lastx, Lasty, Event.touches [0] .clientx, event.touches [0] .clienty);

ancex = event.touches [0] .clientx;

lasty = event.touches [0] .clienty;

}

поймать (err) {

Alert (err.description);

} </p> <p>} </p> <p> // Нарисуйте круг

Функциональная тяга (x, y)

{

ctx.fillstyle = "#ff0000";

ctx.beginpath ();

ctx.arc (x, y, 5,0, math.pi*2, true);

ctx.closepath ();

ctx.fill ();

}

// рисовать линии

Наритка функции (Startx, Starty, Endx, Endy)

{

ctx.beginpath ();

ctx.linecap = "round";

ctx.moveto (startx, starty);

ctx.lineto (endx, endy);

ctx.stroke ();

}

Ключевые моменты:

ctx.linecap = round; Устанавливает крышку стиля в конце линии нарисованной на круг. Это очень важно, в противном случае будут сломанные полосы в местах, где угол линии сильно меняется.

Event.preventDefault (); Отменяет действие по умолчанию события. Этот метод должен быть скорректирован во время скольжения. В противном случае, скользящее событие по умолчанию браузера будет запускается при скольжении, и произойдет раскрывающийся эффект страницы, и вы не сможете нарисовать его.