コメント：図面ボードを作成するとき、当然HTML5のキャンバスを使用してそれを実現します。キャンバスでは、円、長方形、カスタムラインなどを描くことができます。今回は、主にサークルとラインを使用してそれを達成します。 HTMLのタッチイベントへのサポート応答
最初に注意すべきことは、マウスで描くのではなく、iPadなどのタッチデバイスで指を使用していることです。
図面を作成するには、HTML5のキャンバスを自然に使用して実現します。キャンバスでは、円、長方形、カスタムラインなどを描くことができます。今回は、主にサークルとラインを使用してそれを達成します。タッチイベントへの応答は、HTMLでサポートされています。
OnTouchStartタッチスタート
OnTouchMoveタッチスワイプ
Ontouchendタッチエンド
これらのイベントでは、指でブラウザを描くのは非常に簡単です。
iPadへの影響：
アイデア：指が画面に触れたら、OntouchStartイベントで指のタッチ位置に円を追加します。指がスライドし始めたら、前のタッチポイントからOntouchMoveの次のドットまで常にラインを描きます。
HTML：
< xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> canvas </title>
<Meta name = "Viewport" content = "width = device-width、user-scalable = no">
</head>
<body>
<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' in document;
if（タッチ可能）{
canvas.addeventlistener（ 'touchstart'、ontouchstart、false）;
canvas.addeventlistener（ 'touchmove'、ontouchmove、false）;
}
それ以外
{
alert（ "Touchable is False！"）;
}
//最後のタッチ座標
var lastx;
var lasty; </p> <p> var ctx = canvas.getContext（ "2d"）;
ctx.linewidth = 10; //ブラシの厚さ
ctx.strokestyle = "＃ff0000"; //ブラシカラー</p> <p> //タッチ開始イベント
function ontouchstart（event）{
event.preventdefault（）;
lastx = event.touches [0] .clientx;
lasty = event.touches [0] .clienty;
DrawRound（lastx、lastey）; </p> <p>}
//スライドイベントをタッチします
function ontouchmove（event）{
試す
{
event.preventdefault（）;
ドローライン（lastx、lastey、event.touches [0] .clientx、event.touches [0] .clienty）;
lastx = event.touches [0] .clientx;
lasty = event.touches [0] .clienty;
}
catch（err）{
アラート（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（）;イベントのデフォルトアクションをキャンセルします。この方法は、スライドイベント中に調整する必要があります。それ以外の場合、ブラウザのデフォルトのスライドイベントがスライディング時にトリガーされ、ページドロップダウン効果が発生し、描画できなくなります。