情報科学a - · webページ上に図を描画するためのapi ... 情報科学a...
TRANSCRIPT
![Page 1: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/1.jpg)
情報科学A
第13回 図形の描画
1情報科学A 第13回 図形の描画
情報科学A
第1回
xxxxx.html
第13回
←今日のフォルダー作成・・・
![Page 2: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/2.jpg)
Canvasについて
基本図形の作成
曲線図形の作成
情報科学A 第13回 図形の描画2
Canvas
![Page 3: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/3.jpg)
情報科学A 第13回 図形の描画 3
Webページ上に図を描画するためのAPI
HTML5で図形を描く描画エリアを設定
図形はJavaScriptで記述
Canvasとは(p.198)
![Page 4: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/4.jpg)
情報科学A 第13回 図形の描画 4
基本形をstuサーバからコピー
Sample13-1.html
描画エリアの設定(P.198)
![Page 5: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/5.jpg)
情報科学A 第12回 JavaScriptの基礎1 5
直線
Sample13-1.htmlに追加
図形を描く(P.199)
ractice13-1_step2.html</head>の前に挿入する
Script内のコメントは「//」
![Page 6: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/6.jpg)
情報科学A 第12回 JavaScriptの基礎1 6
Sample13-1.htmlに追加
図形を描くー線・四角
practice13-1_step3.html
四角はパスではないのでbeginPathやstokeは必要な
![Page 7: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/7.jpg)
情報科学A 第12回 JavaScriptの基礎1 7
Sample13-1.htmlに追加
図形を描くー円
practice13-1_step4.html
![Page 8: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/8.jpg)
情報科学A 第12回 JavaScriptの基礎1 8
教科書P.203に沿って下図を作成しましょう。
練習1
Practice13-1.html
出来た人は上の図を変更し自分の好きな顔にしましょう。Practice13-2.html
Practice13-1は次回までに完成させておくこと
![Page 9: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/9.jpg)
情報科学A 第13回 図形の描画 9
図形を描くー曲線
![Page 10: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/10.jpg)
情報科学A 第13回 図形の描画 10
図形を描くー曲線Sample13-2.html
practice13-4_step2.html
直前の座標と座標x、yを結ぶ二次ベジェ曲線
(cpx, cpy, x, y)
![Page 11: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/11.jpg)
情報科学A 第13回 図形の描画 11
図形を描くー曲線
practice13-4_step3.html
直前の座標と座標x、yを結ぶ三次ベジェ曲線
(cp1x, cp1y, cpy2x, cp2y, x, y)
![Page 12: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/12.jpg)
情報科学A 第13回 図形の描画 12
練習2
三次ベジェ曲線を繰り返して下のような図を描
きましょうPractice13-3.html
![Page 13: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/13.jpg)
情報科学A 第13回 図形の描画 13
丸、四角、直線、曲線などの図形を組み合わせ
て工夫を加えたオリジナルな絵を描く。次回授業前までにstuサーバーにアップロード
してください。
練習3ファイル名:
En_Kadai13_sub2.html
サンプル↓
![Page 14: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/14.jpg)
14
課題の作成について
情報科学A 第13回 図形の描画
![Page 15: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/15.jpg)
サイト構成イメージは下参照
情報科学A 第13回 図形の描画
En_Kadai13.html
En_Kadai13_sub1.html
トップページ
サブページ
.jpg
.jpg
トップページ先頭にログインID・名前を<h1>で忘れずに表示させる
作成条件
csscssのファイル名は問わないがちゃんと連動していること
css さっき描いた絵
En_Kadai13_sub2.html
Excelグラフ
![Page 16: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/16.jpg)
16
課題を作成するために
内容は自分の興味あることなどなんでもよい
Webサイトはトップページの他、サブページ1ペー
ジを作成する。どちらもcssファイルを適用する
練習3で作成したものをサブページ2としてリンク
する
サブ1にはExcelで作成したグラフをjpgファイルに
して表示させる
習ったことをたくさん使用して工夫したページを作
成する情報科学A 第13回 図形の描画
![Page 17: 情報科学A - · Webページ上に図を描画するためのAPI ... 情報科学A 第13回図形の描画 En_Kadai13.html En_Kadai13_sub1.html ... 提出方法 課題は第15回](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2bb7fbdf1b719d7175746/html5/thumbnails/17.jpg)
17
提出方法
課題は第15回授業終了時間までにstuサーバ
にアップロード完了していること。
写真等はstuサーバのimagesフォルダにアップ
ロード出来ていること
終了する前に、正常に動作しているか必ず確
認しておくこと(下のURL参照)
情報科学A 第13回 図形の描画
http://stu.clas.kitasato-u.ac.jp/~自分のloginID/infoA/Web/En_Kadai13.html
過去の課題についても動作するか確認しておいてください
過去の宿題、課題が未提出の人も完了させておくこと