Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web design iV
Search
Frank
July 25, 2016
Programming
0
170
Web design iV
Frank
July 25, 2016
Tweet
Share
More Decks by Frank
See All by Frank
Web design III
frankweihuang
0
250
Web design II
frankweihuang
0
380
Web design
frankweihuang
0
260
Other Decks in Programming
See All in Programming
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
4.3k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
PipeCDのプラグイン化で目指すところ
warashi
1
280
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.7k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
210
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Writing Fast Ruby
sferik
628
62k
Optimizing for Happiness
mojombo
379
70k
Building Adaptive Systems
keathley
43
2.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Invisible Side of Design
smashingmag
301
51k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Six Lessons from altMBA
skipperchong
28
3.9k
Transcript
web design IV WEI, HUANG e-Mail:
[email protected]
Contents • Create JS – Introduction to easel JS •
Stage • Shape • Bitmap • Graphics • Event • Ticker • Shadow • Sprite – Other
Easel.js • 由於多數瀏覽器逐漸淘汰 flash 轉向支援 HTML 5 , 因此 Abode
推出一套 Create JS 作為提供給以往習 慣使用 Flash 語法開發的使用者加速上手 html 5 下 的 canvas 開發,而 Easel 則是 create.js 提供的其中 一種負責繪圖的函式庫。
Q & A • Q. 為何不寫原生的 canvas 語法 ? A.
語法較長,必須實作一些圖像處理。 • Q. 我沒學過 flash 可以玩嗎? – A. 可以,大致上理解其類別作用使用這無太大困難。 • Q. 有其他類似的 library 嗎? – A. P5.js 、 processing.js ……
Eeael.js • Create 本身是一個大物件內容包山包海,諸如 Bitmap、Shape、Event … • 怎麼用? – CDN
大招開下去,注意 create 採用 jQuery 語法做為基底, – 因此引入 create.js 時,必須同時引入 jQuery 並且需要再 easel 前引入。
Stage • 建立一個主舞台,每個 Stage 對應到一個 Canvas ID • new createjs.Stage(‘canvas’);
• addChild() – 將欲再 Stage 顯示的物件實體加入
Shape • 產生幾何圖形 • 將幾何圖形放入 Stage 中製作 • 須配合 Graphics
Bitmap • 加入一個點陣圖物件 • 可接受 png jpg … 格式 •
可對 Bitmap 進行相對的影像處理
Graphics • 圖形物件,產生出一系列圖形 • 包含線、方、圓…
Event • 對於物件實體所對應的事件處理
Ticker • 計時器,提供物件顯示更新時用
Shadow • 創建陰影
Sprite • 製作動畫使用
練習 & 作業 • 練習 (一) – 製作一個可以顯示數個物件並可於平臺上相互碰撞 • 作業
(一) – 製作打磚塊遊戲 • 作業 (二) – 圖形解鎖