iT邦幫忙

canvas相關文章
共有 52 則文章
鐵人賽 Modern Web DAY 30
Fabricjs 筆記 系列 第 30

技術 Day 30 - 總結

Fabricjs 在算是在網頁前端生存了相當久的一個 Canvas Library(從 2008 - 今天),對於做線上編輯功能這部分是非常強大的,但在對做出特...

鐵人賽 Modern Web DAY 29
Fabricjs 筆記 系列 第 29

技術 Day 29 - Fabricjs 物件填充背景 Pattern

Fabricjs 可以將圖片設定為其他物件的填充色,今天就來介紹一些幫物件填入圖片的方法。 Object.setPatternFill 透過使用物件的 set...

鐵人賽 Modern Web DAY 27
Fabricjs 筆記 系列 第 27

技術 Day 27 - 使用插件客製控制項

DEMO 今天來使用 fabricjs-customise-controls-extension,來做到更快速方便的客製化控制項。 昨天客製化控制項需要去查看...

鐵人賽 Modern Web DAY 26
Fabricjs 筆記 系列 第 26

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

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

鐵人賽 Modern Web DAY 25
Fabricjs 筆記 系列 第 25

技術 Day 25 - Fabricjs 實作: 拼貼圖片

今天來實作一個圖片編輯常用的功能: 拼貼。 顧名思義就是能把自己圖片拼到已經設定好的框框中,而圖片可以在框框中調整要顯示的部分,也就是固定位置的裁切功能。 配合...

鐵人賽 Modern Web DAY 24
Fabricjs 筆記 系列 第 24

技術 Day 24 - Fabricjs 實作: 自訂圖片裁切

在經過了兩天的裁切介紹,今天要來介紹另外一種方式來做圖片的裁切! 透過實作圖片裁切功能,來了解 image.crop 這個屬性的使用。 來實現能夠讓使用者自訂...

鐵人賽 Modern Web DAY 23
Fabricjs 筆記 系列 第 23

技術 Day 23 - Fabricjs 圖形裁切進階

接續昨天 Day 22 - Fabricjs 圖形裁切基礎介紹 繼續來做一些圖片裁切的進階操作,一樣使用 clipPath 來做更多的變化,以下是今天的大綱...

鐵人賽 Modern Web DAY 22
Fabricjs 筆記 系列 第 22

技術 Day 22 - Fabricjs 圖形裁切基礎介紹

裁切功能在一般圖片編輯軟體相當的常見,這邊也能夠透過 Fabricjs 來做圖片裁切的功能,甚至可以做出讓使用者自行決定裁切的位置,切出他們想要留下的範圍,或...

鐵人賽 Modern Web DAY 21
Fabricjs 筆記 系列 第 21

技術 Day 21 - Fabricjs Zoom in & Zoom out

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

鐵人賽 Modern Web DAY 20
Fabricjs 筆記 系列 第 20

技術 Day 20 - Fabricjs 實作網格系統

今天用 Fabricjs 製作網格系統,能夠讓使用者自訂間距。 並且再讓使用者縮放矩形時,能夠讓矩形的大小和移動間距可以照著網格。 先讓大家看看結果 移動、縮...

鐵人賽 Modern Web DAY 19
Fabricjs 筆記 系列 第 19

技術 Day 19 - 實作 Node.js 上傳圖片及操作 Fabricjs 為圖片加上浮水印

Fabricjs 一個很厲害的優勢他不止能在瀏覽器的環境下執行,也能透過在 nodejs 的環境下執行,若今天我們的後端服務也剛好是使用 nodejs 的環境,...

鐵人賽 Modern Web DAY 18
Fabricjs 筆記 系列 第 18

技術 Day 18 - Fabricjs 實作: 圖片上傳並透過拖曳進入 canvas

今天要也是要來將之前所學到的來做一些簡單但卻也很常用到的實作應用 主要利用 Fabricjs drag 事件以及 HTML 圖片來做一個可以直接將外部圖片拖曳...

鐵人賽 Modern Web DAY 17
Fabricjs 筆記 系列 第 17

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

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

鐵人賽 Modern Web DAY 16
Fabricjs 筆記 系列 第 16

技術 Day 16 - Fabricjs 繪畫功能介紹

今天要來介紹 Fabricjs 的繪畫功能,只要切換一個變數,就能夠輕鬆的將 Fabricjs 原本的物件移動模式,改變成繪畫模式,每一個 Fabricjs 繪...

鐵人賽 Modern Web DAY 15
Fabricjs 筆記 系列 第 15

技術 Day 15 - Fabricjs 物件控制項樣式調整

我們可以透過 Fabricjs 建立自由的畫布讓使用者來操控物件。 今天來看看要如何去變更使用者選取後出現的控制項,以及控制滑鼠拖曳的選擇區塊的樣式。 我們可...

鐵人賽 Modern Web DAY 14
Fabricjs 筆記 系列 第 14

技術 Day 14 - Fabricjs 製作子類別

我們知道 Fabricjs 是以物件為主的設計理念,其實原本預設的物件就也有繼承的概念了,像是 IText 是繼承於 Text 類別。 今天就來練習如何去創建自...

鐵人賽 Modern Web DAY 13
Fabricjs 筆記 系列 第 13

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

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

鐵人賽 Modern Web DAY 12
Fabricjs 筆記 系列 第 12

技術 Day 12 -利用序列化與反序列化來實作存檔功能及還原功能

昨天提到利用序列化來將 canvas 變成 json 的格式,今天就來介紹如何把 JSON 格式變回畫布繼續讓使用者使用,今天介紹完反序列化後,就接著來實作序列...

鐵人賽 Modern Web DAY 11
Fabricjs 筆記 系列 第 11

技術 Day 11 - Fabricjs 把畫布序列化

今天我們要來了解 Fabricjs 的序列化功能。一般我們會在什麼情境下用到這個功能呢? 就是存檔和讀檔啦! 使用者若有存取和讀取自己所設計的圖片的需求,我們會...

鐵人賽 Modern Web DAY 10
Fabricjs 筆記 系列 第 10

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

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

鐵人賽 Modern Web DAY 9
Fabricjs 筆記 系列 第 9

技術 Day 9 - Fabricjs 動畫

一般大家提到 canvas 一定會想到一些酷炫的動畫效果,Fabricjs 當然也少不了這些啦! Fabricjs 提供了簡易的動畫 Api 讓我們可以做一些簡...

鐵人賽 Modern Web DAY 8
Fabricjs 筆記 系列 第 8

技術 Day 8 - Fabricjs 事件

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

鐵人賽 Modern Web DAY 7
Fabricjs 筆記 系列 第 7

技術 Day 7 - 文字效果

Fabricjs 不只能只是建立圖形和圖像這些 2D 物件而已,他還能夠建立文字物件來讓使用者自由的縮放、觀看、修改位置。 fabric.Text 從 fabr...

鐵人賽 Modern Web DAY 6
Fabricjs 筆記 系列 第 6

技術 Day 6 - Fabricjs Filters 圖片濾鏡

前幾天已經練習了怎麼樣使用 fabric.Image 新增圖片了,今天讓我們再來為我們圖片添加更豐富的變化! fabricjs 能為圖片渲染出更豐富的濾鏡效果,...

鐵人賽 Modern Web DAY 3
Fabricjs 筆記 系列 第 3

技術 Day 3 - 畫布設置

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

鐵人賽 Modern Web DAY 2
Fabricjs 筆記 系列 第 2

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

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

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

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

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

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

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

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

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

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