\u305d\u308c\u3067\u306f\u30bd\u30fc\u30b9\u3067\u3059\uff0e<\/p>\n
\u4f8b\u306b\u3088\u3063\u3066\u5b8c\u74a7\u306b\u306f\u306a\u3063\u3066\u3044\u307e\u305b\u3093<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>touch paint<\/title>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no\">\r\n<!-- meta\u30bf\u30b0\u3067\u3000\u30b9\u30de\u30db\u306e\u6319\u52d5\u3092\u5236\u9650\u3057\u3066\u3044\u308b -->\r\n<\/head>\r\n<body>\r\n<h1>Key2<\/h1>\r\n<canvas id=\"myCanvas\" width=\"300\" height=\"300\" style=\"border:1px solid #000000;\"><\/canvas>\r\n\r\n<script type=\"text\/javascript\">\r\nvar canvas;\r\nvar paintSwitch = false;\r\nvar oldX = 0;\r\nvar oldY = 0;\r\n\r\n\/\/---\u30b9\u30de\u30db\u306eOS\u53d6\u5f97\r\nvar ua = navigator.userAgent;\/\/User Agent\uff08\u307e\u3041\u6a5f\u7a2e\u540d\u307f\u305f\u3044\u306a\u306e\uff09\u3092\u53d6\u5f97\u3057\u3066\u5909\u6570ua\u306b\u4ee3\u5165\u3057\u306a\u3055\u3044\r\n\/\/---\r\n\r\n\r\n\/\/\u4ee5\u4e0biPhone\u306e\u6642\u306e\u6319\u52d5\r\nif (ua.indexOf(\"iPad\") >= 0 || ua.indexOf(\"iPhone\") >= 0 || ua.indexOf(\"iPod\") >= 0){\r\n\/\/\u7279\u306b\u6319\u52d5\u306f\u307e\u3060\u6c7a\u3081\u3066\u3044\u306a\u3044\r\n}\r\n\r\n\/\/\u4ee5\u4e0bAndroid\u306e\u6642\u306e\u6319\u52d5\r\nif (ua.indexOf(\"Android\") >= 0){\r\n\/\/\u7279\u306b\u6319\u52d5\u306f\u307e\u3060\u6c7a\u3081\u3066\u3044\u306a\u3044\r\n}\r\n\r\n\r\n\/\/---------\r\nwindow.onload = function() {\/\/\u3053\u308c\u8aad\u307f\u8fbc\u3093\u3060\u6642\u306b\uff0c\uff0c\uff0c\r\n syokika();\/\/syokika\u3092\u5b9f\u884c\u3057\u3066\u306d\r\n};\r\n\r\nfunction syokika(){\/\/\u3067\uff0c\u3053\u308c\u304csyokika\u306d\r\ncanvas = document.getElementById(\"myCanvas\");\r\nvar context = canvas.getContext(\"2d\");\r\n\r\n\/\/--\u3053\u3053\u304b\u3089PC\u306e\u30de\u30a6\u30b9\u5165\u529b\u306e\u6319\u52d5\r\n\/\/canvas.addEventListener(\"mousemove\", draw, true);\r\n\/\/canvas.addEventListener(\"mousedown\", myMove, false);\r\n\/\/canvas.addEventListener(\"mouseup\", myMouseUp, false);\r\n\r\n\/\/--\u3053\u3053\u304b\u3089\u30b9\u30de\u30db\u306e\u30bf\u30c3\u30c1\u306e\u6319\u52d5\uff1c\u2212NEW!!\r\ncanvas.addEventListener(\"touchmove\",myTouchDraw,false);\r\ncanvas.addEventListener(\"touchstart\",myTouchStart,false);\r\ncanvas.addEventListener(\"touchend\",myTouchEnd,false);\r\n}\r\n\r\n\/\/--PC\u306e\u30de\u30a6\u30b9\u5165\u529b\u6642\u306e\u6319\u52d5\r\nfunction myMove(atai){\r\n paintSwitch = true;\r\n\t\t\r\n\t\toldX = atai.clientX - canvas.offsetLeft;\/\/\u30aa\u30d5\u30bb\u30c3\u30c8\uff08\u305a\u308c\uff09\u306e\u4fee\u6b63\uff1d\u3088\u3053\r\n oldY = atai.clientY - canvas.offsetTop;\/\/\u30aa\u30d5\u30bb\u30c3\u30c8\uff08\u305a\u308c\uff09\u306e\u4fee\u6b63\uff1d\u305f\u3066\r\n\r\n}\r\n\r\nfunction myMouseUp(){\r\n\t\tpaintSwitch = false;\r\n}\r\n\/\/--PC\u306e\u6319\u52d5\u3053\u3053\u307e\u3067\r\n\r\n\r\n\/\/--\u30bf\u30c3\u30c1\u306e\u6319\u52d5\u3053\u3053\u304b\u3089\r\nfunction myTouchStart(atai){\r\n paintSwitch = true;\r\n oldX = atai.touches[0].pageX - canvas.offsetLeft;\/\/\u30aa\u30d5\u30bb\u30c3\u30c8\uff08\u305a\u308c\uff09\u306e\u4fee\u6b63\uff1d\u3088\u3053\r\n oldY = atai.touches[0].pageY - canvas.offsetTop;\/\/\u30aa\u30d5\u30bb\u30c3\u30c8\uff08\u305a\u308c\uff09\u306e\u4fee\u6b63\uff1d\u305f\u3066\r\n}\r\n\r\nfunction myTouchEnd(){\r\n\t\tpaintSwitch = false;\r\n}\r\n\/\/--\u30bf\u30c3\u30c1\u306e\u6319\u52d5\u3053\u3053\u307e\u3067\r\n\r\n\r\n\/\/setInterval(draw, 10);\/\/10msec\u8d77\u304d\u306b\u63cf\u3044\u3066\u306d\r\n\r\nfunction draw(atai) {\r\nif (!paintSwitch) return;\r\n\tvar x = atai.clientX - canvas.offsetLeft;\r\n var y = atai.clientY - canvas.offsetTop;\r\n \/\/var can = document.getElementById(\"myCanvas\");\r\n var context = canvas.getContext(\"2d\");\r\n context.strokeStyle = \"rgba(255,0,0,1)\";\r\n context.lineWidth = 1;\r\n context.beginPath();\r\n context.moveTo(oldX, oldY);\r\n context.lineTo(x, y);\r\n context.stroke();\r\n context.closePath();\r\n oldX = x;\r\n oldY = y;\r\n}\r\n\r\nfunction myTouchDraw(atai) {\r\nif (!paintSwitch) return;\r\n\tvar x = atai.touches[0].pageX - canvas.offsetLeft;\/\/\u306a\u3093\u304b\u30bf\u30c3\u30c1\u306e\u5834\u5408\u306fpageX\u3058\u3083\u306a\u3044\u3068\u3060\u3081\r\n var y = atai.touches[0].pageY - canvas.offsetTop;\/\/\u306a\u3093\u304b\u30bf\u30c3\u30c1\u306e\u5834\u5408\u306fpageY\u3058\u3083\u306a\u3044\u3068\u3060\u3081\r\n \/\/var can = document.getElementById(\"myCanvas\");\r\n var context = canvas.getContext(\"2d\");\r\n context.strokeStyle = \"rgba(255,0,0,1)\";\/\/16\u9032\u6570\u3067\u306a\u304f\u3053\u3046\u3044\u3046\u63cf\u304d\u65b9\u3082\u3042\u308a\u307e\u3059 a\u306f\u30a2\u30eb\u30d5\u30a1\uff1d\u900f\u660e\u30c1\u30e3\u30f3\u30cd\u30eb\r\n\t\/\/context.strokeStyle = \"rgb(255,0,0)\";\/\/\u30a2\u30eb\u30d5\u30a1\u3067\u306a\u304f\u3066\u3082OK\r\n context.lineWidth = 1;\/\/\u7dda\u306e\u592a\u3055\r\n context.beginPath();\/\/\u7dda\u3092\u63cf\u304d\u59cb\u3081\u307e\u3059\r\n context.moveTo(oldX, oldY);\/\/\u3053\u306e\u70b9\u304b\u3089\r\n context.lineTo(x, y);\/\/\u3053\u306e\u70b9\u307e\u3067\r\n context.stroke();\/\/\u63cf\u3044\u3066\u306d\r\n context.closePath();\/\/\u7dda\u306f\u3053\u3053\u307e\u3067\r\n oldX = x;\r\n oldY = y;\r\n}\r\n\r\n\r\n\/\/---\u30d5\u30a1\u30a4\u30eb\u306b\u66f8\u304d\u51fa\u3059\u7528\r\nfunction screenshot(){\r\n var png = canvas.toDataURL();\r\n document.getElementById(\"newImg\").src = png;\/\/newImge\u3068\u3044\u3046ID\u3092\u63a2\u3057\u3066PNG\u5165\u308c\u3066\u306d\r\n}\r\n\/\/---\r\n\r\n<\/script>\r\n\r\n<form>\r\n<input type=\"button\" value=\"\u753b\u50cf\u306b\u5909\u63db\" onclick=\"screenshot()\">\r\n<!-- onclick\u3067screenshot\u3068\u3044\u3046function\u5b9f\u884c\u3057\u3066\u306d -->\r\n<\/form>\r\n<div><img id=\"newImg\"><\/div>\r\n<!-- \u3053\u306eDIV\u306eID\u3092\u63a2\u3057\u3066\u3053\u3053\u306b\u753b\u50cf\u3092\u5165\u308c\u308b -->\r\n<\/body>\r\n<\/html><\/pre>\n102\u884c\u76ee\u306e\u3000oldX<\/span> =<\/span> atai<\/span>.<\/span>touches<\/span>[<\/span>0<\/span>]<\/span>.<\/span>clientX<\/span> –<\/span> canvas<\/span>.<\/span>offsetLeft<\/span>;<\/span><\/p>\ntouche[0]\u306f1\u672c\u6307\u3067\u30bf\u30c3\u30c1\u3068\u3044\u3046\u610f\u5473\u3067\u3059\uff0e<\/p>\n
\u305f\u3060\uff0c\u3053\u306e\u307e\u307e\u3067\u306f\u7dda\u3092\u63cf\u3044\u305f\u6642\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3046\u307e\u304f\u884c\u304d\u307e\u305b\u3093\uff0e<\/p>\n
\u305d\u3053\u3067\uff0c<\/p>\n
atai.preventDefault();<\/p>\n
\u3092101\u3068102\u884c\u76ee\u306e\u9593\u306b\u5165\u308c\u307e\u3059\uff0e<\/p>\n","protected":false},"excerpt":{"rendered":"
\u305d\u308c\u3067\u306f\u30bd\u30fc\u30b9\u3067\u3059\uff0e \u4f8b\u306b\u3088\u3063\u3066\u5b8c\u74a7\u306b\u306f\u306a\u3063\u3066\u3044\u307e\u305b\u3093 <!DOCTYPE html> <html> <head> <title>touch paint<\/title … \u7d9a\u304d\u3092\u8aad\u3080 HTML\u5165\u9580\u305d\u306e17-\u30bf\u30c3\u30c1\u3067\u304a\u7d75\u304b\u304d\uff12<\/span>