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
PipeCDのプラグイン化で目指すところ
warashi
1
270
技術同人誌をMCP Serverにしてみた
74th
1
640
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Cult of Friendly URLs
andyhume
79
6.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Balancing Empowerment & Direction
lara
1
430
Adopting Sorbet at Scale
ufuk
77
9.5k
Code Review Best Practice
trishagee
69
18k
GitHub's CSS Performance
jonrohan
1031
460k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Gamification - CAS2011
davidbonilla
81
5.4k
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 • 製作動畫使用
練習 & 作業 • 練習 (一) – 製作一個可以顯示數個物件並可於平臺上相互碰撞 • 作業
(一) – 製作打磚塊遊戲 • 作業 (二) – 圖形解鎖