HTML5

HTML5
HTML5入門その19-タッチでお絵かき4

タッチお絵かきもまもなく終了です. まずは現在のプログラムに以下のパーツを追加して,いろいろな色で塗れるようにしてみましょう.AとBの両方を追加してください.どこに入れるかは,考えてみましょう. A  <scrip […]

続きを読む
HTML5
HTML入門その18-タッチでお絵かき3

iPhoneとAndroid(nexus7)で動作確認しました. <!DOCTYPE html> <html> <head> <title>touch paint</ […]

続きを読む
HTML5
HTML入門その17-タッチでお絵かき2

それではソースです. 例によって完璧にはなっていません <!DOCTYPE html> <html> <head> <title>touch paint</title […]

続きを読む
HTML5
HTML入門その16-タッチでお絵かき1

スマートホンでタッチした座標を取り出す仕組みを組み込んでみましょう 構文は canvas.addEventListener("touchstart",myTouchStart,false); です. このcanvasはす […]

続きを読む
HTML5
HTML5入門その15-お絵かきツール3

PC版での入力はマウスを使いました. このマウス入力は canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな canvas.addEv […]

続きを読む
HTML5
HTML5入門その14-お絵かきツール2

お絵かきツール(PC版)です <!DOCTYPE html> <html> <head> <title>touch paint</title> <meta […]

続きを読む
HTML5
HTML5入門その13-お絵かきツール1

マウス入力を利用してお絵かきツールを作りましょう(これはPC用) 以下をコピペしてPCで実行してみましょう <!DOCTYPE html> <html> <head> <titl […]

続きを読む
HTML5
HTML5その12-加速度センサでお絵かき

改良版です 改良箇所はハイライト表示しています. <!DOCTYPE html> <html> <head> <title>DeviceGravity</title& […]

続きを読む
HTML5
HTML5入門その11-加速度センサで描く

加速度センサを使って抽象画というかミニマルアートっぽいのを描きます <!DOCTYPE html> <html> <head> <title>DeviceGravity&l […]

続きを読む
HTML5
HTML5入門その10-実機で動作させる(準備)

実機での動作にはWEBサーバが必要です WEBサーバにプログラムを保存 スマホでそのページへアクセス 実行結果を見てみる という流れです。 無料のWEBサーバをうまく探せなかった方は、Wドライブを使ってください。 ただし […]

続きを読む