WEBのcanvasに手書きやマウスのドラッグで絵や文字を書く

WEBのcanvasに手書きやマウスのドラッグで絵や文字を書く


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

javascriptで手書きサンプル[すべて同じ線の太さ](別ウィンドウ) javascriptで手書きサンプル[角度で線の太さを変える](別ウィンドウ)
<!DOCTYPE html>
<html lang="ja">
<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="content-language" content="ja">
  <title>HTML5のcanvasに手書きやマウスのドラッグで絵を書くサンプル</title>
  <meta name="Description" content="HTML5のcanvasに手書きやマウスのドラッグで絵を書くサンプル">
  <META name="Keywords" content="Javascript,html5,canvas,手書き,ドラッグ,タッチ">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
<style>
  /* MSのIE11、iOS等でドラッグ時に画面が揺れないようにする */
  canvas#drawcanvas{
    -ms-touch-action:none
    touch-action:none
  }
</style>

<script>
  var mamDraw=[];
  mamDraw.isMouseDown=false;
  mamDraw.position=[];
  mamDraw.position.x=0;
  mamDraw.position.y=0;
  mamDraw.position.px=0;
  mamDraw.position.py=0;

  window.addEventListener("load",function(){
    //初期設定
    mamDraw.canvas=document.getElementById("drawcanvas");
    mamDraw.canvas.addEventListener("touchstart",onDown);
    mamDraw.canvas.addEventListener("touchmove",onMove);
    mamDraw.canvas.addEventListener("touchend",onUp);
    mamDraw.canvas.addEventListener("mousedown",onMouseDown);
    mamDraw.canvas.addEventListener("mousemove",onMouseMove);
    mamDraw.canvas.addEventListener("mouseup",onMouseUp);
    window.addEventListener("mousemove",StopShake);
    mamDraw.context=mamDraw.canvas.getContext("2d");
    mamDraw.context.strokeStyle="#000000";
    mamDraw.context.lineWidth=5;
    mamDraw.context.lineJoin="round";
    mamDraw.context.lineCap="round";
    document.getElementById("clearCanvas").addEventListener("click",clearCanvas);
  });
  function StopShake(event){
    mamDraw.isMouseDown=false;
    event.stopPropagation();
  }
  function onDown(event){
    mamDraw.isMouseDown=true;
    mamDraw.position.px=event.touches[0].pageX-event.target.getBoundingClientRect().left-mamGetScrollPosition().x;
    mamDraw.position.py=event.touches[0].pageY-event.target.getBoundingClientRect().top -mamGetScrollPosition().y;
    mamDraw.position.x=mamDraw.position.px;
    mamDraw.position.y=mamDraw.position.py;
    drawLine();
    event.preventDefault();
    event.stopPropagation();
  }
  function onMove(event){
    if(mamDraw.isMouseDown){
      mamDraw.position.x=event.touches[0].pageX-event.target.getBoundingClientRect().left-mamGetScrollPosition().x;
      mamDraw.position.y=event.touches[0].pageY-event.target.getBoundingClientRect().top -mamGetScrollPosition().y;
      drawLine();
      mamDraw.position.px=mamDraw.position.x;
      mamDraw.position.py=mamDraw.position.y;
      event.stopPropagation();
    }
  }
  function onUp(event){
    mamDraw.isMouseDown=false;
    event.stopPropagation();
  }
  function onMouseDown(event){
    mamDraw.position.px=event.clientX-event.target.getBoundingClientRect().left;
    mamDraw.position.py=event.clientY-event.target.getBoundingClientRect().top ;
    mamDraw.position.x=mamDraw.position.px;
    mamDraw.position.y=mamDraw.position.py;
    drawLine();
    mamDraw.isMouseDown=true;
    event.stopPropagation();
  }
  function onMouseMove(event){
    if(mamDraw.isMouseDown){
      mamDraw.position.x=event.clientX-event.target.getBoundingClientRect().left;
      mamDraw.position.y=event.clientY-event.target.getBoundingClientRect().top ;
      drawLine();
      mamDraw.position.px=mamDraw.position.x;
      mamDraw.position.py=mamDraw.position.y;
      event.stopPropagation();
    }
  }
  function onMouseUp(event){
    mamDraw.isMouseDown=false;
    event.stopPropagation();
  }
  function drawLine(){
    mamDraw.context.strokeStyle="#000000";
    mamDraw.context.lineWidth=5;
    mamDraw.context.lineJoin="round";
    mamDraw.context.lineCap="round";
    mamDraw.context.beginPath();
    mamDraw.context.moveTo(mamDraw.position.px,mamDraw.position.py);
    mamDraw.context.lineTo(mamDraw.position.x,mamDraw.position.y);
    mamDraw.context.stroke();
  }
  function clearCanvas(){
    mamDraw.context.fillStyle="rgb(255,255,255)";
    mamDraw.context.fillRect(
      0,0,
      mamDraw.canvas.getBoundingClientRect().width,
      mamDraw.canvas.getBoundingClientRect().height
    );
  }
  function mamGetScrollPosition() {
    return {
      "x":document.documentElement.scrollLeft || document.body.scrollLeft,
      "y":document.documentElement.scrollTop  || document.body.scrollTop
    };
  }
</script>

</head>
<body>
  <h3>HTML5のcanvasに手書きやマウスのドラッグで絵を書くサンプル</h3>
  <div>
    <canvas id="drawcanvas" width="400px" height="300px" style="border:1px solid #000;"></canvas>
  </div>
  <input type="button" id="clearCanvas" value="クリア" style="width:160px;height:60px;" data-inline="true" />
</body>
</html>
			

Mam's WebSite