iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

菜雞用Canvas/Pixi動動動動動起來 系列

先搞懂canvas動畫,再來略懂略懂PixiJS

鐵人鍊成 | 共 30 篇文章 | 17 人訂閱 訂閱系列文 RSS系列文 團隊甘阿餒
DAY 1

【Day01】前言

前言 上次參加已經是前年,去年懶惰癌發作沒有參加,其實今年原本也想找各種藉口不參加~但是這次剛好卡在換工作之際,9月剛好是一名無業遊民,如果不參加我怕對不起我爸...

2020-09-14 ‧ 由 卡羅奇奇 分享
DAY 2

【Day02】Canvas-基本介紹

<canvas> 基本介紹 <canvas>是一個html5的tag,可以形容為一個畫布容器,本身無繪製能力,需要利用javascrip...

2020-09-15 ‧ 由 卡羅奇奇 分享
DAY 3

【Day03】Canvas-繪製矩形(Rect)

繪製圖形 網格(座標空間)概念 在繪圖之前,需先了解<canvas>網格(或是說座標空間),如下圖網格上一單位相當於畫布上的1px,網格原點在左上角...

2020-09-16 ‧ 由 卡羅奇奇 分享
DAY 4

【Day04】Canvas-繪製路徑(Path)

繪製圖形 路徑繪製 使用路徑畫圖形會比較多步驟,基本上會包含以下步驟:【step 1】 beginPath():產生路徑,每一次呼叫就會產生一個路徑,路徑會被存...

2020-09-17 ‧ 由 卡羅奇奇 分享
DAY 5

【Day05】Canvas-套用顏色與樣式

顏色與樣式 顏色 屬性 描述 fillStyle = color 設定填滿圖形時用的顏色 strokeStyle = color 設定圖形邊框...

2020-09-18 ‧ 由 卡羅奇奇 分享
DAY 6

【Day06】Canvas-繪製文字

繪製文字 文字 方法 描述 fillText(textToDraw, x, y [, maxWidth]) 填滿文字。textToDraw是文字內...

2020-09-19 ‧ 由 卡羅奇奇 分享
DAY 7

【Day07】Canvas-繪製影像

使用影像 <canvas>也可以使用影像呈現圖片或作為背景,只要是瀏覽器支援的圖片格式都可以支援,ex.PNG、GIF、JPG或是同一頁面其他畫布產...

2020-09-20 ‧ 由 卡羅奇奇 分享
DAY 8

【Day08】Canvas-變形效果

變形效果 在使用變形效果以前,通常會先儲存畫布,以下為畫布的儲存和復原方法: 畫布狀態儲存與復原 方法 描述 save() 儲存現階段畫布狀態...

2020-09-21 ‧ 由 卡羅奇奇 分享
DAY 9

【Day09】Canvas-合成效果&裁剪路徑

合成效果 之前的範例可以看到後來畫的圖形如果位置重複就會覆蓋在前面畫出的圖形上,而canvas也有globalCompositeOperation這個屬性處理這...

2020-09-22 ‧ 由 卡羅奇奇 分享
DAY 10

【Day10】Canvas-自己做個"小畫家"

做個小畫家 在進入動畫階段以前,讓我做個小小的範例~看到網路上很多人都用canvas做小畫家,沒創意如我想說也來用前幾天學到的那些基本觀念來試試看~ 小畫家功能...

2020-09-23 ‧ 由 卡羅奇奇 分享