手書きやマウスのドラッグで絵や文字が書けるWEBサイト

HTMLでcanvasを使うと手書き対応のWEBサイトを作成することができます。
タブレットとPCの両方に対応するにはマウス(onMouseDown,onMouseMove,onMouseUp)とタッチ(onTouchStart,onTouchMove,onTouchEnd)の両方のイベントを処理する必要があります。

mamHandlWritten JSをダウンロード

■使い方

上記ボタンを押してmamhandwritten.jsをダウンロードします。

以下のようにHTMLファイルに記述して使用できます

<script src="./js/mamhandwritten.js"></script>
<script>
  //手書きキャンバスのId名,手書きキャンバスのクリアボタンのId名
  var mamHandwritten1=new TMamHandwritten("drawCanvasId","clearButtonId");
</script>
<canvas id="drawCanvasId" width="360px" height="240px" style="border:1px solid #000;width:360px;height:240px;"></canvas><br>
<input type="button" id="clearButtonId" value="クリア" style="width:160px;height:60px;" /><br>
<input type="button" onclick="mamHandwritten1.savePicture('draw.php');" value="送信する" style="width:160px;height:60px;" />

■使用例

このサンプルでは「送信する」ボタンを押しても、データベースなどに登録はしません。送信結果を表示するだけです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="content-language" content="ja">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
  <script src="./js/mamhandwritten.js"></script>
  <script>
    //コンストラクタ(手書きキャンバスのId名, 手書きキャンバスのクリアボタンのId名)
    var mamHandwritten1=new TMamHandwritten("drawCanvasId","clearButtonId");
    //登録するボタン押下時の設定
    window.addEventListener("DOMContentLoaded",function(){
      document.getElementById("submitButtonId").addEventListener("click",function(){
        mamHandwritten1.savePicture("draw.php");
      });
    });
  </script>
</head>
<body>
  <h3>HTML5のcanvasに手書きやマウスのドラッグで絵を書くサンプル</h3>
  <div>
    <canvas id="drawCanvasId" width="360px" height="240px" style="border:1px solid #000;width:360px;height:240px;"></canvas>
  </div>
  <input type="button" id="clearButtonId" value="クリア" style="width:160px;height:60px;" /><br>
  <input type="button" id="submitButtonId" value="送信する" style="width:160px;height:60px;" />
</body>
</html>