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

14 Like 1 留言 32420 瀏覽

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

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

神Q超人 ‧ 2018-07-24

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

9 Like 3 留言 15189 瀏覽

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

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

神Q超人 ‧ 2018-08-12

7 Like 3 留言 14244 瀏覽

鐵人賽 Modern Web

重新認識 JavaScript 系列第 32 篇

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

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

Kuro Hsu ‧ 2018-01-04

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 1 留言 12356 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 07 - 動畫的基礎

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

fillano ‧ 2016-12-20

0 Like 0 留言 11268 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 DAY 27. JavaScript Canvas 影像處理

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

Cian ‧ 2017-12-30

0 Like 0 留言 10252 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 DAY 29. JavaScript Canvas 處理

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

Cian ‧ 2018-01-01

1 Like 0 留言 9702 瀏覽

鐵人賽 Modern Web DAY 24

用 Javascript 當個影像魔術師系列第 24 篇

技術 Day 24 - Canvas 常用套件 - fabric js 介紹

Day 24 - Canvas 常用套件 - fabric js 介紹之前的實作上幾乎都是使用原生的方式跟 Canvas 作互動或者影像處理，而其實現在有許多...

lb01910483 ‧ 2019-10-09

5 Like 0 留言 9207 瀏覽

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

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

神Q超人 ‧ 2018-08-19

0 Like 0 留言 8719 瀏覽

鐵人賽 Modern Web DAY 26

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

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

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

Cian ‧ 2017-12-29

1 Like 0 留言 8600 瀏覽

鐵人賽 Modern Web DAY 8

Fabricjs 筆記系列第 8 篇

技術 Day 8 - Fabricjs 事件

Fabricjs 還有一個很厲害的地方，他提供了相當完整個事件系統，我們想要監聽某個動作，就只需要像是 JQuery 那樣使用 on 來監聽事件，使用 off...

Nono ‧ 2018-10-22

0 Like 0 留言 7957 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 DAY 25. JavaScript Canvas 操作

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

Cian ‧ 2017-12-28

1 Like 0 留言 7873 瀏覽

鐵人賽 Modern Web DAY 14

用 Javascript 當個影像魔術師系列第 14 篇

技術 Day 14 - Canvas 圖片保存 Part 1

圖片保存前面辛辛苦苦的做出一些效果調整，今天開始來介紹如何保存我們辛苦的成果吧！在這邊我們會使用到一個 Canvas 的方法 toDataURL，這個方法會...

lb01910483 ‧ 2019-09-29

0 Like 0 留言 7392 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 DAY 28. JavaScript Canvas 動畫

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

Cian ‧ 2017-12-31

11 Like 4 留言 7260 瀏覽

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

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

神Q超人 ‧ 2018-08-01

2 Like 0 留言 6941 瀏覽

鐵人賽 Modern Web DAY 25

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

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

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

fillano ‧ 2017-01-11

2 Like 3 留言 6923 瀏覽

鐵人賽 Modern Web DAY 2

Fabricjs 筆記系列第 2 篇

技術 Day 2 - Fabricjs 和原生 Canvas 比較

Fabricjs 是基於 HTML5 Canvas 來撰寫的 Library，能讓我們更簡單、更方便的來操作 Canvas，在學習 Fabricjs 之前，我們...

Nono ‧ 2018-10-16

3 Like 0 留言 6583 瀏覽

鐵人賽 Modern Web DAY 15

用 Javascript 當個影像魔術師系列第 15 篇

技術 Day 15 - 圖片保存 Part 2 & 小結

Day 15 - 圖片保存 Part 2 圖片保存昨天介紹到了使用 daraUrl 來完成圖片下載，但到最後面發現當圖片超過一定大小時，會無法成功下載，今天就...

lb01910483 ‧ 2019-09-30

2 Like 0 留言 6541 瀏覽

鐵人賽 Modern Web DAY 10

Fabricjs 筆記系列第 10 篇

技術 Day 10 - 為圖形填入漸層色

今天分別介紹兩部分線性漸層圓形漸層線性漸層 linear Gradients Fabricjs 可以為物件加上漸層的效果，可選擇多種顏色的漸層，讓物件...

Nono ‧ 2018-10-24

0 Like 0 留言 6225 瀏覽

鐵人賽 Software Development DAY 9

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列第 9 篇

技術 [實作篇]MediaStreams API - 基本應用(搭配canvas)

學習目標如何利用 getUserMedia API 實作簡單的canvas應用實作接下來會展示一些簡單實作，主要是熟悉能透過getUserMedia...

早晨來杯咖啡 ‧ 2020-09-22 ‧團隊甘阿餒

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 ‧團隊好想工作室第一屆鐵人賽

1 Like 0 留言 5424 瀏覽

鐵人賽 Modern Web DAY 13

Fabricjs 筆記系列第 13 篇

技術 Day 13 - 把物件群組起來

前言今天要來玩玩 Fabricjs 一個很好用的群組功能，能夠把多個物件群組成一個，就像我們常用的那些繪圖軟體有的群組功能一樣，可以把不同的物件群組起來，讓他...

Nono ‧ 2018-10-27

2 Like 0 留言 5392 瀏覽

技術 Canvas - 基礎圖形繪製篇

此篇要來介紹 canvas，它是一個 html 中的元素，並且可以使用 javascript 來操縱，並在網頁上畫出一些圖形，今天就是帶大家一起了解該如何繪製圖...

Ares ‧ 2019-06-18

1 Like 1 留言 5239 瀏覽

鐵人賽 Modern Web DAY 28

Canvas 小錦囊系列第 28 篇

技術 Day 28 - 用 canvas 與 pdfjs 做文件簽名（上）

前述今天用前面做過的小畫家相似功能，來完成一個可以在文件上面簽名的功能～當然也會有新的東西可以玩。思路我們將文件簽名分成三個步驟 <div cla...

雪莉 ‧ 2021-10-13 ‧團隊拒絕奴性的網友

1 Like 1 留言 5219 瀏覽

鐵人賽 Modern Web DAY 26

Fabricjs 筆記系列第 26 篇

技術 Day 26 - Fabricjs 進階自訂控制項

今天要來做更進階的自訂控制項，不只能夠修改內建的一些樣式，夠能夠讓我們使用自己想要的圖示來做控制項，甚至變更每個控制項的功能。今日就來做把左上控制項改成刪除...

Nono ‧ 2018-11-09

1 Like 0 留言 5108 瀏覽

鐵人賽 Modern Web DAY 3

Fabricjs 筆記系列第 3 篇

技術 Day 3 - 畫布設置

Day 3 - 畫布設置 Fabric 畫布設置我們必須透過 new fabric.Canvas 來抓取 <canvas> 標籤，並且管理所有 F...

Nono ‧ 2018-10-17

2 Like 1 留言 5101 瀏覽

鐵人賽 Modern Web DAY 21

Fabricjs 筆記系列第 21 篇

技術 Day 21 - Fabricjs Zoom in & Zoom out

今天來做 Fabricjs 的縮放畫布 Zoom 只要透過修改 Zoom 值，就能夠讓畫布做到縮放的效果，fabricjs 會主動幫我們調整物件的大小。預設...

Nono ‧ 2018-11-04

2 Like 0 留言 4988 瀏覽

鐵人賽 Modern Web DAY 17

Fabricjs 筆記系列第 17 篇

技術 Day 17 - 簡易小畫家實作

今天就來複習昨天我們學到的 Fabricjs 繪畫功能來做一個簡易的小畫家吧。透過 Fabricjs 我們可以相當快速又簡單的做出一個類似畫板的功能，讓使用者...

Nono ‧ 2018-10-31

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

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

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

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

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

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

技術 07 - 動畫的基礎

技術 DAY 27. JavaScript Canvas 影像處理

技術 DAY 29. JavaScript Canvas 處理

技術 Day 24 - Canvas 常用套件 - fabric js 介紹

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

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

技術 Day 8 - Fabricjs 事件

技術 DAY 25. JavaScript Canvas 操作

技術 Day 14 - Canvas 圖片保存 Part 1

技術 DAY 28. JavaScript Canvas 動畫

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

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

技術 Day 2 - Fabricjs 和原生 Canvas 比較

技術 Day 15 - 圖片保存 Part 2 & 小結

技術 Day 10 - 為圖形填入漸層色

技術 [實作篇]MediaStreams API - 基本應用(搭配canvas)

技術 JS30-Day8-Fun with HTML5 Canvas

技術 Day 13 - 把物件群組起來

技術 Canvas - 基礎圖形繪製篇

技術 Day 28 - 用 canvas 與 pdfjs 做文件簽名（上）

技術 Day 26 - Fabricjs 進階自訂控制項

技術 Day 3 - 畫布設置

技術 Day 21 - Fabricjs Zoom in & Zoom out

技術 Day 17 - 簡易小畫家實作

標記使用者

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

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

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

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