Embedded Files
新Googleサイトで制作中のホームページに図形を表示する必要が生じたので，どのような手法があるか調べてみた．結論的に言えば，Canvasを利用すればよいことが分かった．注）CanvasについてはPythonプログラミングの中で紹介した．
新Googleサイトで制作中のホームページに図形を表示する必要が生じたので，どのような手法があるか調べてみた．結論的に言えば，Canvasを利用すればよいことが分かった．注）CanvasについてはPythonプログラミングの中で紹介した．
Canvasでは．HTMLとJavaScriptを組み合わせて描画内容を指定する．Canvasによる描画は，次のような流れで実行されるようである．
Canvasでは．HTMLとJavaScriptを組み合わせて描画内容を指定する．Canvasによる描画は，次のような流れで実行されるようである．
① HTMLで，<canvas>要素の幅と高さ，id名を指定する．
① HTMLで，<canvas>要素の幅と高さ，id名を指定する．
② getElementByIdメソッドでHTMLと関連付けるため，getContextメソッドで描画機能を有効にする．
② getElementByIdメソッドでHTMLと関連付けるため，getContextメソッドで描画機能を有効にする．
③ canvasAPI (Application Programming Interface) の仕様で定められたメソッドやプロパティを使用して，具体的な描画内容を指定する．
③ canvasAPI (Application Programming Interface) の仕様で定められたメソッドやプロパティを使用して，具体的な描画内容を指定する．
そのための手続きは定型文として見なすことができるので，利用者は作図内容に沿ったデータを準備すれば作図できると言っても過言ではない．学習した「日の丸」描画プログラムについて各行の役割を分析した結果を以下に示した．
そのための手続きは定型文として見なすことができるので，利用者は作図内容に沿ったデータを準備すれば作図できると言っても過言ではない．学習した「日の丸」描画プログラムについて各行の役割を分析した結果を以下に示した．
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ja">
<html lang="ja">
<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<title>日の丸</title>
<title>日の丸</title>
<script> ←スクリプト処理開始
<script> ←スクリプト処理開始
window.onload=function(){ ← HTMLの読み込みが完了してから実行
window.onload=function(){ ← HTMLの読み込みが完了してから実行
//コンテキストを生成
//コンテキストを生成
var cvs = document.getElementById("test"); ← id名はtest.
var cvs = document.getElementById("test"); ← id名はtest.
getElementByIdメソッドでid名を指定してHTML側と関連付ける
getElementByIdメソッドでid名を指定してHTML側と関連付ける
var ctx = cvs.getContext("2d"); ← getContextメソッドで描画機能を有効化，
var ctx = cvs.getContext("2d"); ← getContextメソッドで描画機能を有効化，
cvs.getContext('2d')の指定で，描画機能が利用できるように2Dコンテキストを取得．
cvs.getContext('2d')の指定で，描画機能が利用できるように2Dコンテキストを取得．
//色を指定
//色を指定
ctx.strokeStyle="black"; //線の色を黒に指定
ctx.strokeStyle="black"; //線の色を黒に指定
ctx.fillStyle="red"; //塗りつぶしの色を赤に指定
ctx.fillStyle="red"; //塗りつぶしの色を赤に指定
//矩形（旗の外枠）
//矩形（旗の外枠）
ctx.beginPath(); ← beginPath()メソッドは，現在のパスをリセットする際に使用
ctx.beginPath(); ← beginPath()メソッドは，現在のパスをリセットする際に使用
ctx.strokeRect(0, 0, 150, 100) ← 長方形の左上の座標と幅，高さ (x, y, width, height)
ctx.strokeRect(0, 0, 150, 100) ← 長方形の左上の座標と幅，高さ (x, y, width, height)
//円（塗りつぶし）
//円（塗りつぶし）
ctx.beginPath();
ctx.beginPath();
ctx.arc(75, 50, 30,Math.PI*0/180,Math.PI*360/180,false); ← 座標75, 50を中心に半径30の円を，0から2ラジアンまで時計方向 (false) に描く. degree * ( Math.PI / 180 )はラジアンに変換する手続き．
ctx.arc(75, 50, 30,Math.PI*0/180,Math.PI*360/180,false); ← 座標75, 50を中心に半径30の円を，0から2ラジアンまで時計方向 (false) に描く. degree * ( Math.PI / 180 )はラジアンに変換する手続き．
ctx.fill(); ← 忘れることが多い．arcだけでは描かない．
ctx.fill(); ← 忘れることが多い．arcだけでは描かない．
}
}
</script> ←スクリプト処理終了
</script> ←スクリプト処理終了
</head>
</head>
<body>
<body>
<canvas id="test" width="200" height="150"></canvas> ←要素で，id名，描画領域の幅と高さを指定する．
<canvas id="test" width="200" height="150"></canvas> ←要素で，id名，描画領域の幅と高さを指定する．
</body>
</body>
</html>
</html>
星の描画
星の描画
lineTo ( ) を複数組み合わせることによって，様々な図形を描画することができる．下図（左）は線画（右）を「stroke」ではなく，「fill」を使って塗りつぶしたもの．参考にした資料
lineTo ( ) を複数組み合わせることによって，様々な図形を描画することができる．下図（左）は線画（右）を「stroke」ではなく，「fill」を使って塗りつぶしたもの．参考にした資料
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ja">
<html lang="ja">
<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<title>サンプル</title>
<title>サンプル</title>
<script>
<script>
// 星の描画
// 星の描画
window.onload = function() { ←HTMLの読み込みが完了してから実行
window.onload = function() { ←HTMLの読み込みが完了してから実行
var cvs = document.getElementById("test"); ←getElementByIdメソッドでid名を指定してHTML側と
var cvs = document.getElementById("test"); ←getElementByIdメソッドでid名を指定してHTML側と
関連付ける
関連付ける
var ctx = cvs.getContext("2d"); ← getContextメソッドで描画機能を有効化．
var ctx = cvs.getContext("2d"); ← getContextメソッドで描画機能を有効化．
描画機能が利用できるように2Dコンテキストを取得．
描画機能が利用できるように2Dコンテキストを取得．
ctx.fillStyle = "aqua"; ← 塗りつぶし色は青緑
ctx.fillStyle = "aqua"; ← 塗りつぶし色は青緑
ctx.strokeStyle="blue"; ← 枠線の色
ctx.strokeStyle="blue"; ← 枠線の色
ctx.strokeRect(0, 0, 300, 250) ← 枠の描画（原点および x, y の幅）
ctx.strokeRect(0, 0, 300, 250) ← 枠の描画（原点および x, y の幅）
ctx.beginPath(); ← beginPath()メソッドは，現在のパスをリセットする際に使用
ctx.beginPath(); ← beginPath()メソッドは，現在のパスをリセットする際に使用
ctx.moveTo(150, 30); ←頂点（点１） 点は時計回りに１から５と命名
ctx.moveTo(150, 30); ←頂点（点１） 点は時計回りに１から５と命名
ctx.lineTo(91, 211); ←左斜め下の点（点４） へ線を描く
ctx.lineTo(91, 211); ←左斜め下の点（点４） へ線を描く
ctx.lineTo(245, 99); ←右上の点（点２）へ線を描く
ctx.lineTo(245, 99); ←右上の点（点２）へ線を描く
ctx.lineTo(55, 99); ←左上の点（点５）へ線を描く
ctx.lineTo(55, 99); ←左上の点（点５）へ線を描く
ctx.lineTo(209, 211); ←右斜め下の点（点３）へ線を描く
ctx.lineTo(209, 211); ←右斜め下の点（点３）へ線を描く
ctx.lineTo(150, 30); ←頂点（点１）へ線を描く
ctx.lineTo(150, 30); ←頂点（点１）へ線を描く
ctx.fill(); ← 塗りつぶし
ctx.fill(); ← 塗りつぶし
//ctx.stroke(); ←前行の代わりに本行を用いると線画になる
//ctx.stroke(); ←前行の代わりに本行を用いると線画になる
}
}
</script>
</script>
</head>
</head>
<body>
<body>
<canvas id="test" width="350" height="300"></canvas>
<canvas id="test" width="350" height="300"></canvas>
</body>
</body>
</html>
</html>
Canvasによる描画は後期高齢者にとって簡単に理解できるものではないと思われるが，既成のプログラムを利用して，試行錯誤しながら分析すると．何となくメソッド等の存在意義が分かったような気になるのは確実である．プログラムをsample.htmlのようなファイル名で保存し，ダブルクリックすれば画像が表示される．また，上記のコードを Googleサイトの挿入モードにおいて「埋め込みコード」として埋め込むと画像が表示される．
Canvasによる描画は後期高齢者にとって簡単に理解できるものではないと思われるが，既成のプログラムを利用して，試行錯誤しながら分析すると．何となくメソッド等の存在意義が分かったような気になるのは確実である．プログラムをsample.htmlのようなファイル名で保存し，ダブルクリックすれば画像が表示される．また，上記のコードを Googleサイトの挿入モードにおいて「埋め込みコード」として埋め込むと画像が表示される．
参考資料
参考資料
星の作図に必要な5点の座標は以下の一般式で計算可能
星の作図に必要な5点の座標は以下の一般式で計算可能
(cos0,sin0), (cos2π/5,sin2π/5), (cos4π/5,sin4π/5), (cos6π/5,sin6π/5), (cos8π/5,sin8π/5) ・・・・一般式
(cos0,sin0), (cos2π/5,sin2π/5), (cos4π/5,sin4π/5), (cos6π/5,sin6π/5), (cos8π/5,sin8π/5) ・・・・一般式
(cos90, sin90), (cos162, sin162), (cos234, sin234), (cos306, sin306), (cos378, sin378) 90°回転して，上下反転させて，適当に平行移動させてY軸対称の座標を得た．希望の大きさになるようにスケールを掛ける．
(cos90, sin90), (cos162, sin162), (cos234, sin234), (cos306, sin306), (cos378, sin378) 90°回転して，上下反転させて，適当に平行移動させてY軸対称の座標を得た．希望の大きさになるようにスケールを掛ける．
(2019/7.9)
(2019/7.9)
Page updated
Google Sites
Report abuse