情報科学A

第13回 図形の描画

1情報科学A 第13回 図形の描画

情報科学A

第1回

xxxxx.html

第13回

←今日のフォルダー作成・・・

Canvasについて

基本図形の作成

曲線図形の作成

情報科学A 第13回 図形の描画2

Canvas

情報科学A 第13回 図形の描画 3

Webページ上に図を描画するためのAPI

HTML5で図形を描く描画エリアを設定

図形はJavaScriptで記述

Canvasとは(p.198)

情報科学A 第13回 図形の描画 4

基本形をstuサーバからコピー

Sample13-1.html

描画エリアの設定（P.198）

情報科学A 第12回 JavaScriptの基礎1 5

直線

Sample13-1.htmlに追加

図形を描く（P.199）

ractice13-1_step2.html</head>の前に挿入する

Script内のコメントは「//」

情報科学A 第12回 JavaScriptの基礎1 6

Sample13-1.htmlに追加

図形を描くー線・四角

practice13-1_step3.html

四角はパスではないのでbeginPathやstokeは必要な

情報科学A 第12回 JavaScriptの基礎1 7

Sample13-1.htmlに追加

図形を描くー円

practice13-1_step4.html

情報科学A 第12回 JavaScriptの基礎1 8

教科書P.203に沿って下図を作成しましょう。

練習１

Practice13-1.html

出来た人は上の図を変更し自分の好きな顔にしましょう。Practice13-2.html

Practice13-1は次回までに完成させておくこと

情報科学A 第13回 図形の描画 9

図形を描くー曲線

情報科学A 第13回 図形の描画 10

図形を描くー曲線Sample13-2.html

practice13-4_step2.html

直前の座標と座標x、yを結ぶ二次ベジェ曲線

(cpx, cpy, x, y)

情報科学A 第13回 図形の描画 11

図形を描くー曲線

practice13-4_step3.html

直前の座標と座標x、yを結ぶ三次ベジェ曲線

(cp1x, cp1y, cpy2x, cp2y, x, y)

情報科学A 第13回 図形の描画 12

練習2

三次ベジェ曲線を繰り返して下のような図を描

きましょうPractice13-3.html

情報科学A 第13回 図形の描画 13

丸、四角、直線、曲線などの図形を組み合わせ

て工夫を加えたオリジナルな絵を描く。次回授業前までにstuサーバーにアップロード

してください。

練習3ファイル名：

En_Kadai13_sub2.html

サンプル↓

14

課題の作成について

情報科学A 第13回 図形の描画

サイト構成イメージは下参照

情報科学A 第13回 図形の描画

En_Kadai13.html

En_Kadai13_sub1.html

トップページ

サブページ

.jpg

.jpg

トップページ先頭にログインID・名前を<h1>で忘れずに表示させる

作成条件

csscssのファイル名は問わないがちゃんと連動していること

css さっき描いた絵

En_Kadai13_sub2.html

Excelグラフ

16

課題を作成するために

内容は自分の興味あることなどなんでもよい

Webサイトはトップページの他、サブページ1ペー

ジを作成する。どちらもcssファイルを適用する

練習3で作成したものをサブページ2としてリンク

する

サブ1にはExcelで作成したグラフをjpgファイルに

して表示させる

習ったことをたくさん使用して工夫したページを作

成する情報科学A 第13回 図形の描画

17

提出方法

課題は第15回授業終了時間までにstuサーバ

にアップロード完了していること。

写真等はstuサーバのimagesフォルダにアップ

ロード出来ていること

終了する前に、正常に動作しているか必ず確

認しておくこと（下のURL参照）

情報科学A 第13回 図形の描画

http://stu.clas.kitasato-u.ac.jp/~自分のloginID/infoA/Web/En_Kadai13.html

過去の課題についても動作するか確認しておいてください

過去の宿題、課題が未提出の人も完了させておくこと