365日アプリケーションブログ

一日一アプリケーションを構築することを目指すブログです。アプリケーションの種類は基本的に気まぐれです。

【20140430】【jQuery Mobile】ペイントアプリを作る

お題

ペイントアプリを作る

プログラム概要

touchmoveイベントが発生すると緑色でペイントを行う

ソース

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0"> 
<title>ペイント</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" > 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/touchpaint.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="p-touchpaint" >
  <div data-role="header">
    <h1>ぺいんと</h1>
  </div>
  <div data-role="content">
    <div id="canvas"></div>
  </div>
</div>
</body>
</html>

JS

color = ['rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)','rgb(255,255,0)','rgb(255,0,255)'];

$(document).on("pageshow", "#p-touchpaint", function(){
  $("#canvas").html('<canvas id="drawable" width="'+window.innerWidth+'" height="'+window.innerHeight+'" />');
  canvas = document.getElementById('drawable');
  ctx = canvas.getContext('2d');
  
  $("#drawable").bind("touchmove", function(e){
    ratioY = canvas.height / canvas.clientHeight;
    ratioX = canvas.width / canvas.clientWidth;
    e.preventDefault();

    touch = e.originalEvent.touches[0];
    x = (touch.pageX - canvas.offsetLeft) * ratioX;
    y = (touch.pageY - canvas.offsetTop) * ratioY;
    ctx.beginPath();
    ctx.fillStyle = color[1];
    ctx.arc(x, y, 10, 0, Math.PI * 2, true);
    ctx.fill();
  });
});

URL

※スマホでしか動きません