iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
自我挑戰組

學習 canvas 日記 系列

趁鐵人賽的機會,強迫自已持續學習 canvas 至少 30 天

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 11

第 11 天 負片效果

負片效果就是把現在的顏色相反後再重新繪製一張新的 所以要做的就是找出每個顏色的 [R, B, G, K]的陣列然後把每個顏色陣列中的 R、B、G 都用255減去...

2018-10-24 ‧ 由 bdp 分享
DAY 12

第 12 天 文字樣式一

樣式設定和 css 很類似可以設定粗細、字級、字型.... // 文字樣式 ctx.font = '24px Arial'; ctx.fillStyle =...

2018-10-25 ‧ 由 bdp 分享
DAY 13

第 13 天 文字樣式二

把圖片當材質填滿作為範圍的文字效果或也可以說是 圖片和文字 做像下圖裁切的效果可以利用 globalCompositeOperation這類似 illustra...

2018-10-26 ‧ 由 bdp 分享
DAY 14

第 14 天 文字繞圓

利用 for 迴圈和 rotate()就可以做到文字繞圓的效果而且不需要畫圓就可以像下圖 var cvs = document.getElementById('...

2018-10-27 ‧ 由 bdp 分享
DAY 15

第 15 天 圓餅圖

基本畫布建立 <canvas id="cvs" width="400" height="300&quot...

2018-10-28 ‧ 由 bdp 分享
DAY 16

第 16 天 多邊形

var counter = 5, r = 50; for (var i =0;i<=counter;i++) { var x = r *...

2018-10-29 ‧ 由 bdp 分享
DAY 17

第 17 天 旋轉、放大、縮小

繼續以前一天的五角形為例子因為 for 迴圈得到的 (x,y)會從圓中心 (0, 0) 向左找到起點 (半徑, 0)依順序順時針找到其他點全部點連線後產生形狀因...

2018-10-30 ‧ 由 bdp 分享
DAY 18

第 18 天 setInterval、clearInterval

setInterval 執行後就會不斷的重覆 setInterval(function, milliseconds, param1, param2, ...)...

2018-10-31 ‧ 由 bdp 分享
DAY 19

第 19 天 setInterval 轉出轉入

繼續前一天的內容除了 "角度增加" 產生原地旋轉再加上 "半徑減少"、"矩形尺寸減少" var de...

2018-11-01 ‧ 由 bdp 分享
DAY 20

第 20 天 setInterval() 分多個執行

前一天是以一個物件轉出轉入的效果如果是改為每幾秒產生一個物件就需要使用 陣列 記錄每一個 物件常值 var ary = []; 把 setInterval()...

2018-11-02 ‧ 由 bdp 分享