iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

5 Like 0 留言 9209 瀏覽

技術 [筆記][HTML][JavaScript]canvas的基本用法(4)-一點都不基本的極座標！

嗨！大家好，到了每個禮拜的發文時間了(才怪這禮拜已經四篇了XD)，今天要來說說[筆記][HTML][JavaScript]canvas的基本用法(3)-最後用滑...

神Q超人 ‧ 2018-08-19

9 Like 3 留言 15192 瀏覽

達標好文技術 [筆記][HTML][JavaScript]canvas的基本用法(3)-最後用滑鼠互動動畫做個結尾！

嗨囉！大家好！這篇文章是這個系列的最後了，來說說如何用滑鼠和canvas內的繪圖做簡單的互動吧！ ...這次的前言是不是有點少XD，但是前言真的真的真的很難想啊...

神Q超人 ‧ 2018-08-12

11 Like 4 留言 7260 瀏覽

達標好文技術 [筆記][HTML][JavaScript]canvas的基本用法(2)-這次來練習一些動畫的原理吧！

Hello！大家好！不知道大家有沒有喜歡的動畫，可能是海賊王、七龍珠、火影忍者、灌籃高手...等等，說到小弟我啊，最喜歡的非棋靈王莫屬了！但是我們今天不是要來聊...

神Q超人 ‧ 2018-08-01

14 Like 1 留言 32422 瀏覽

達標好文技術 [筆記][HTML][JavaScript]canvas的基本用法(1)-來繪製一些簡單的圖形吧！

大家好啊！又到了每週一次的動頭腦...不對！這禮拜沒有了，哈哈哈，前一陣子啊，小弟我參加了一個活動(在這裡)，主要是在九個禮拜的時間，每個禮拜都會出一個主題讓大...

神Q超人 ‧ 2018-07-24

7 Like 3 留言 14247 瀏覽

鐵人賽 Modern Web

重新認識 JavaScript 系列第 32 篇

技術重新認識 JavaScript 番外篇 (2) - 你所不知道的 pushState

本系列文章已重新編修，並在加入部分 ES6 新篇章後集結成書，有興趣的朋友可至天瓏書局選購，感謝大家支持。購書連結 https://www.tenlong....

Kuro Hsu ‧ 2018-01-04

0 Like 0 留言 10252 瀏覽

鐵人賽 Modern Web DAY 29

重新學習網頁設計系列第 29 篇

技術 DAY 29. JavaScript Canvas 處理

DAY 29. JavaScript Canvas 處理跟canvas有關的處理，時常在最後我們需要預覽、上傳、下載影像這個單元就來說說這些動作該如何實現。...

Cian ‧ 2018-01-01

0 Like 0 留言 7393 瀏覽

鐵人賽 Modern Web DAY 28

重新學習網頁設計系列第 28 篇

技術 DAY 28. JavaScript Canvas 動畫

DAY 28. JavaScript Canvas 動畫動畫其實就是把一張張靜態圖片連續播放，讓人看到感覺像是動畫我們可以每次繪圖時改變內容大小，形狀顏色等等...

Cian ‧ 2017-12-31

0 Like 0 留言 11269 瀏覽

鐵人賽 Modern Web DAY 27

重新學習網頁設計系列第 27 篇

技術 DAY 27. JavaScript Canvas 影像處理

DAY 27. JavaScript Canvas 影像處理今天我們將認識如何操作Canvas的每個像素顏色。 drawImage drawImage方法讓我...

Cian ‧ 2017-12-30

0 Like 0 留言 8720 瀏覽

鐵人賽 Modern Web DAY 26

重新學習網頁設計系列第 26 篇

技術 DAY 26. JavaScript Canvas 操作(二)

DAY 26. JavaScript Canvas 操作(二) 今天來到認識Canvas的第二天我們已經知道如何在一張畫布Canvas上揮灑顏料了接著我們來認識...

Cian ‧ 2017-12-29

0 Like 0 留言 4201 瀏覽

鐵人賽 Software Development DAY 24

Kotlin 30 天，通過每天一個小 demo 學習 Android 開發系列第 24 篇

技術 Kotlin 開發第 24 天 Painter (Canvas)

提供一個畫板，讓使用者可以通過手指在上面畫畫。可以將畫好的內容存到相簿當中。 Components View Canvas File Bitmap 在 C...

陳董 Don ‧ 2017-12-27

0 Like 0 留言 7959 瀏覽

鐵人賽 Modern Web DAY 25

重新學習網頁設計系列第 25 篇

技術 DAY 25. JavaScript Canvas 操作

DAY 25. JavaScript Canvas 操作元素Canvas相信大家一定耳熟能響，所以關於Canvas是一個什麼東西在此不多贅述但不管是什麼原因，...

Cian ‧ 2017-12-28

0 Like 0 留言 5977 瀏覽

鐵人賽 Modern Web DAY 8

新手也能懂的JS30 系列第 8 篇

技術 JS30-Day8-Fun with HTML5 Canvas

JS30-Day8-Fun with HTML5 Canvas Day8-課題內容進入JS30的第八天，今天我們要透過HTML的<canvas>元...

王郁翔 ‧ 2017-12-27 ‧團隊好想工作室第一屆鐵人賽

0 Like 0 留言 2928 瀏覽

鐵人賽 Modern Web DAY 8

重新學習網頁設計系列第 8 篇

技術 DAY 8. JavaScript and Me

DAY 8. JavaScript and Me 本篇內容分為兩個部分個人學習方式個人常用的utils 其內容受眾屬於比較出階開發人員但若您是資深前輩...

Cian ‧ 2017-12-11

1 Like 0 留言 30046 瀏覽

鐵人賽 Modern Web DAY 25

30天實作線上簡報播放機制系列第 31 篇

技術 ?? - 目前初步做好的prototype

參考： tmp9 後面花了不少時間把這份簡報需要的動畫特效做出來，雖然不是全部，但是大致上能看了。因為用了IE沒支援的Canvas 2D Context AP...

fillano ‧ 2017-02-16

2 Like 2 留言 24237 瀏覽

鐵人賽 Modern Web DAY 25

30天實作線上簡報播放機制系列第 30 篇

技術 ?? - 處理Office的內建圖型

既然還能發文... ECMA-376定義Office內建圖型的方法在規格書的zip檔中，可以找到presetShapeDefinitions.xml這個檔案（...

fillano ‧ 2017-01-20

1 Like 2 留言 13290 瀏覽

鐵人賽 Modern Web DAY 25

30天實作線上簡報播放機制系列第 28 篇

技術 ?? - 繪製Office內建的圖型

Office使用的內建圖型定義在ECMA-376的presetShapeDefinitions.xml這份文件中。（下載規格書Part1的zip檔解開後，會看O...

fillano ‧ 2017-01-13

2 Like 0 留言 6942 瀏覽

鐵人賽 Modern Web DAY 25

30天實作線上簡報播放機制系列第 27 篇

技術 ?? - 目前的簡單成果

參考：example012.html 資料的複雜性結果奮鬥最久的還是處理pptx的資料XD 來反省一下...先看一下簡報的架構（排除了一些跟播放沒直接關係的設...

fillano ‧ 2017-01-11

1 Like 0 留言 2315 瀏覽

鐵人賽 Modern Web DAY 22

30天實作線上簡報播放機制系列第 22 篇

技術 22 - 用剖析出的資料試畫母片

大致上剖析出母片資料，除了寫測試之外，還是先試試看可不可以正常畫出來XD 目前產出的母片資料先看看目前產出的母片資料長怎樣： "backgrou...

fillano ‧ 2017-01-04

1 Like 1 留言 2318 瀏覽

鐵人賽 Modern Web DAY 19

30天實作線上簡報播放機制系列第 19 篇

技術 19 - 畫出標準投影片

之前只顧著做各種文字方塊、動畫效果及轉場效果，反而沒有嘗試畫出一個標準投影片，也就是標題加上文字列表，雖然投影片資料剖析的部份還沒做好，不過還是用預計會產生的資...

fillano ‧ 2017-01-01

1 Like 0 留言 3746 瀏覽

鐵人賽 Modern Web DAY 16

30天實作線上簡報播放機制系列第 16 篇

技術 16 - 文字呈現的細節

弄pptx的剖析有點膩了，今天先來看文字的呈現以及怎麼利用Canvas 2D Context來實作。文字主體(p:txBody)、段落(a:p)與文字展現(a...

fillano ‧ 2016-12-29

1 Like 0 留言 3152 瀏覽

鐵人賽 Modern Web DAY 11

30天實作線上簡報播放機制系列第 11 篇

技術 11 - 試做轉場特效

之前的畫面繪製，都只有一個投影片，所以使用的資料都只有一個投影片。轉場特效通常會套用在投影片之間，這裡的試做就需要多張投影片，所以就需要調整一下了。調整程式，...

fillano ‧ 2016-12-24

3 Like 1 留言 2289 瀏覽

鐵人賽 Modern Web DAY 9

30天實作線上簡報播放機制系列第 9 篇

技術 09 - 動畫改進

之前做的動畫效果很簡單，只有右移跟下移的直線動作。另一個基本的動畫是依照弧線來移動，就試著把它實作出來。 jQuery的動畫效果，預設會有加減速，而在Power...

fillano ‧ 2016-12-22

2 Like 1 留言 12357 瀏覽

鐵人賽 Modern Web DAY 7

30天實作線上簡報播放機制系列第 7 篇

技術 07 - 動畫的基礎

在Canvas做動畫不難，其實只是重複兩個動作：清掉舊畫面繪製出目前的畫面很久以前，在HTML中做動畫，大概都是透過setTimeout()或setI...

fillano ‧ 2016-12-20

2 Like 0 留言 2641 瀏覽

鐵人賽 Modern Web DAY 5

30天實作線上簡報播放機制系列第 5 篇

技術 05 - 單位的換算

Office OpenXML裡面使用的「單位」，目前看到的有幾個：長度、指定百分比、指定字型大小等，就用03的例子來實驗改進一下長度 ECMA-376使用一種...

fillano ‧ 2016-12-18

1 Like 0 留言 4043 瀏覽

鐵人賽 Modern Web DAY 3

30天實作線上簡報播放機制系列第 3 篇

技術 03 - Canvas 2D Context繪圖的基礎：圖片、圖形與文字繪製

今天休息一下，簡單溫習一下Canvas 2D Context的基本繪圖功能。取得Context 透過Canvas元素的getContext()方法，就可以取得...

fillano ‧ 2016-12-16

5 Like 2 留言 4446 瀏覽

鐵人賽開發技術 DAY 26

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 26 篇

技術 MIS2000Lab.的「HTML5 認證考試，從零開始」#26-- 先進圖形 / Canvas API

=============================================== 本系列文章已經集結出書 HTML5、CSS、JavaScript...

mis2000lab ‧ 2014-10-21

技術 [筆記][HTML][JavaScript]canvas的基本用法(4)-一點都不基本的極座標！

達標好文 技術 [筆記][HTML][JavaScript]canvas的基本用法(3)-最後用滑鼠互動動畫做個結尾！

達標好文 技術 [筆記][HTML][JavaScript]canvas的基本用法(2)-這次來練習一些動畫的原理吧！

達標好文 技術 [筆記][HTML][JavaScript]canvas的基本用法(1)-來繪製一些簡單的圖形吧！

技術 重新認識 JavaScript 番外篇 (2) - 你所不知道的 pushState

技術 DAY 29. JavaScript Canvas 處理

技術 DAY 28. JavaScript Canvas 動畫

技術 DAY 27. JavaScript Canvas 影像處理

技術 DAY 26. JavaScript Canvas 操作(二)

技術 Kotlin 開發第 24 天 Painter (Canvas)

技術 DAY 25. JavaScript Canvas 操作

技術 JS30-Day8-Fun with HTML5 Canvas

技術 DAY 8. JavaScript and Me

技術 ?? - 目前初步做好的prototype

技術 ?? - 處理Office的內建圖型

技術 ?? - 繪製Office內建的圖型

技術 ?? - 目前的簡單成果

技術 22 - 用剖析出的資料試畫母片

技術 19 - 畫出標準投影片

技術 16 - 文字呈現的細節

技術 11 - 試做轉場特效

技術 09 - 動畫改進

技術 07 - 動畫的基礎

技術 05 - 單位的換算

技術 03 - Canvas 2D Context繪圖的基礎：圖片、圖形與文字繪製

技術 MIS2000Lab.的「HTML5 認證考試，從零開始」#26-- 先進圖形 / Canvas API

標記使用者

達標好文技術 [筆記][HTML][JavaScript]canvas的基本用法(3)-最後用滑鼠互動動畫做個結尾！

達標好文技術 [筆記][HTML][JavaScript]canvas的基本用法(2)-這次來練習一些動畫的原理吧！

達標好文技術 [筆記][HTML][JavaScript]canvas的基本用法(1)-來繪製一些簡單的圖形吧！

技術重新認識 JavaScript 番外篇 (2) - 你所不知道的 pushState