プログラミングお作法
HTML5入門その22-写真にお絵かき3
次にJavascript内のどこかに次のfunctionを入れます //--カメラの画像 function myCamera(mycam){ var myFile = mycam.files[0]; new MegaPi […]
HTML5入門その21-写真にお絵かき2
それではカメラを起動するスクリプトです． 今回はhtml media captureというものを使います． <input type="file" accept="image/*" capture="camera" […]
HTML5入門その20-写真にお絵かき1
HTML5についてはこのカメラにお絵かきで一旦終了します． ここでは，まずカメラを起動して画像をcanvasに読み込みます． そのために，ライブラリを使用します．ライブラリは便利機能を別のファイルに記述しておいて呼び出す […]
HTML5入門その19-タッチでお絵かき4
タッチお絵かきもまもなく終了です． まずは現在のプログラムに以下のパーツを追加して，いろいろな色で塗れるようにしてみましょう．AとBの両方を追加してください．どこに入れるかは，考えてみましょう． A <scrip […]
HTML入門その18-タッチでお絵かき３
iPhoneとAndroid（nexus7）で動作確認しました． <!DOCTYPE html> <html> <head> <title>touch paint</ […]
HTML入門その17-タッチでお絵かき２
それではソースです． 例によって完璧にはなっていません <!DOCTYPE html> <html> <head> <title>touch paint</title […]
HTML入門その16-タッチでお絵かき1
スマートホンでタッチした座標を取り出す仕組みを組み込んでみましょう 構文は canvas.addEventListener("touchstart",myTouchStart,false); です． このcanvasはす […]
HTML5入門その15-お絵かきツール3
PC版での入力はマウスを使いました． このマウス入力は canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな canvas.addEv […]
HTML5入門その14-お絵かきツール2
お絵かきツール（PC版）です <!DOCTYPE html> <html> <head> <title>touch paint</title> <meta […]
HTML5入門その13-お絵かきツール1
マウス入力を利用してお絵かきツールを作りましょう（これはPC用） 以下をコピペしてPCで実行してみましょう <!DOCTYPE html> <html> <head> <titl […]