iT邦幫忙

canvas相關文章
共有 228 則文章

技術 E2 WebGL 畫圓範例:變數的傳遞與處理

引言 接下來,我們來介紹如何用頂點著色器和片段著色器渲染圖形,程式碼的部分,只要是 glsl 我都會用截圖的形式。 頂點著色器 在使用著色器時,會用到兩種變數,...

技術 D7 讓排序演算法互動!探索 Cannon.js 的物理世界

引言 今天花了一整天時間研究 Cannon 引擎,試圖將主題 C 中粒子系統從二維提升到三維,不過,由於效能方面一直無法取得突破,並未達成預期目標。本文純粹分享...

技術 D6 讓排序演算法起舞吧!3D圓餅圖的排序動畫

引言 昨天我們完成了資料結構的設計,並響應式數據擴充動畫物件,讓動畫執行時能夠呼叫 updateVertices,今天我們將把它完成, 建議先看過這三文章:...

技術 D2 從數據到視覺:利用 BufferGeometry 生成 3D 長條圖(上)

引言 在 3D 圖形渲染和資料視覺化中,效能是關鍵問題之一。隨著資料量的增大,若繼續使用高階語言提供的內建陣列和資料結構,雖然靈活方便,通常會造成效能瓶頸。為了...

技術 D1 Three.js 與音訊處理:3D 音頻視覺化的架構搭建指南

引言 在上一個主題中,我們用原生 JS 完成了基本的粒子系統和排序演算法的視覺化,然而,造輪子還是有一定的局限性,尤其是更複雜的圖形如 3D 的投影和座標轉換,...

技術 C7 堆排序的結構之美-動態演繹堆化過程的優雅

引言 在我們前面的文章中,我們探討了以「分治法」為基礎的排序演算法,例如快速排序和合併排序,並展示了它們如何在前端特效應用中進行視覺化處理。然而,除了分治法,另...

鐵人賽 自我挑戰組 DAY 11

技術 【Day 12】JavaScript 介紹與基本語法、HTML Canvas

點我查看目錄 前言 我們前面花了一些時間討論關於 HTML 與 CSS 的相互操作,但目前網頁還沒有任何功能,因此我們現在就來開始做這件事情。而我希望透過一個簡...

技術 C6 合併排序的舞步-視覺化演繹分治法的魅力

引言 在昨天的文章中,我們介紹了 快速排序(Quick Sort) 演算法,它也是一種基於 分治法 的排序方法。快速排序透過選取一個樞軸(pivot),將數列分...

技術 C5 快速排序的雙面交鋒-動畫背後的遞迴與迭代思維

引言 演算法中,遞迴通常是用來處理分治問題的利器,像是快速排序 (QuickSort) 就是其中的典型範例。然而,傳統遞迴有一個問題——當數據集非常龐大時,會因...

技術 C4 流動的插入和希爾-迭代生成器驅動的排序動畫

引言 在前一篇文章中,我們完成了泡沫排序和選擇排序,並詳細說明了如何自製迭代方程式,並將其與依賴迭代生成器的方法進行比較。今天,藉著這股勢頭,我們將繼續探索插入...

技術 C3 上升的泡沫與選擇-迭代生成器驅動的排序動畫

引言 昨天,我們完成排序演算法的動畫架構,接下來,讓我們將各種排序方法逐步實現並植入動畫,製作逐格動畫效果!這樣的視覺化能讓我們清楚看到數據排序的過程,並進一步...

技術 C2 讓排序演算法起舞吧!最小單位:華爾滋

引言 昨天,我們完成一個簡單的粒子系統,具備了視覺化界面。接下來,讓我們植入排序演算法吧!相信大家也不陌生,就是一種把無序的數列按大小順序排列的方法,我們可以用...

技術 C1 彈跳吧!彈珠-粒子系統彈性碰撞

引言 在上一個主題中,我們成功實現了基本的動畫效果和粒子系統,並設計了一個獨立的繪圖管理工具。然而,對於一個相對簡單的粒子系統來說,這樣的設計似乎有些多餘,因為...

技術 B7 與 Web Worker 互動:多執行緒渲染真的能提升效能嗎?

引言 在單執行緒的 JavaScript 中,所有的任務都在主執行緒上執行,包括渲染、事件處理與計算邏輯。這導致在進行複雜的計算時,可能會引發畫面卡頓或掉幀的情...

技術 B6 從掠食者-獵物模型瞥見粒子系統-魔幻引力

架構設計 在昨天的文章中,我們完成了一個繪圖工具 painter,已經完成渲染的步驟,今天,我們將把演算法的細節補足: export default funct...

技術 B5 掌握分層渲染:製作高效 Canvas 繪圖工具

架構設計 在昨天的文章中,我們探討了如何創建動態效果,雖然過程中省略了一些細節,但這為我們打下了良好的基礎。今天,我們將逐步補充那些細節,根據昨天的討論,目前的...

技術 B4 在旋轉的沙漏中:掠食者與獵物的動態美學

架構設計 延續前幾篇的設計模式,我們的目標是模組化演算法,提供一個生成演算法的工廠,並且把使用方法封裝在 update 和 render 方法中,這裡,物件的初...

技術 B1 玩轉 IntersectionObserver:打造你的專屬動畫管理器!

動畫管理員使用指南 簡介 在現代網頁開發中,動態效果為用戶界面增添了生動的互動性。本篇文章將介紹一個功能簡單的動畫管理員,它能夠簡化 Canvas 動畫的管理和...

技術 Fun with HTML5 Canvas趣味畫布

Fun with HTML5 Canvas趣味畫布 先附上練習的成品.有點像小畫家的畫布一樣,但畫筆顏色、粗細、線條要讓使用者控制的話,就要另外寫js去處理囉~...

技術 A5 面板元件-一鍵搞定!錄影按鈕元件

為什麼要錄影 在互動性高的應用程式中,讓使用者可以自由紀錄畫面,是必備的元素之一。這不僅提供了用戶便捷的錄影功能,也讓開發者可以輕鬆製作展示影片。無論是創建教學...

收納規劃APP 系列 第 6

技術 Day6:ngx-moveable 變形功能之三角形處理 (同場加映Canvas)

寫到一半,突然意識到有角架、角櫃的存在,所以開始跟三角形搏鬥希望可以藉由點擊頂點來改變三角形的形狀,但是 ngx-movable 跟我理想的情況有點差距,所以寫...

技術 嘿!讓我們開始規劃舞步

大家好~ 我是熱愛用 Canvas 創作的 Jerry!在這個系列中,我將帶你探索數學、物理和演算法的世界,透過 Canvas 來實現各種視覺效果。如果你對前端...

鐵人賽 Modern Web DAY 20

技術 Day20- 修改畫布 prototype 的入門-拆解 fabric-history prototype (2)

來細拆 fabric-history 裏面有哪些東西吧 使用立即執行函數(IIFE): 將整個擴展包裹在一個立即執行函數中,可以避免污染全局命名空間。 fabr...

鐵人賽 Modern Web DAY 16

技術 Day16-fabric.js 進階組合技!自定義控件開發 (control) 實例

如果我想要每個物件的控制,旁邊都可以有刪除或是複製功能的 icon 可以點擊,並且可以個別操作,該怎麼做呢? 登登,可以使用 fabric.Control 來新...

鐵人賽 Modern Web DAY 15

技術 Day15-Fabric.js 中的動畫效果

先上demo:Animation Easing | Fabric.js Demos (fabricjs.com)fabric.js 使用物件的方式來控制,可以讓...

鐵人賽 Modern Web DAY 11

技術 Day11-fabricjs 的花式圖片上傳、濾鏡使用

fabricjs 可以怎麼操作圖片 可以創建和操作圖片對象 (fabric.Image),支持輸入輸出多種圖片格式(如 PNG、JPEG 等)。 圖片上傳:...

鐵人賽 Modern Web DAY 6

技術 Day 06 | 說好的無限呢?

我今天又要跳脫一下實作來解釋一些技術上面的抉擇。 今天的主題主要是關於 HTML canvas 的,如果你對實作選擇背後的考量沒有太大興趣的話,你今天可以先休...

鐵人賽 Modern Web DAY 4

技術 Day 04 | Canvas 你怎麼都沒有反應?

Canvas 只是睡著了? Canvas 本身是沒有「動」的概念。 已經畫下去的東西除非把它擦掉或是畫新的東西覆蓋上去,不然它是不會消失的。 畫在上面的東西是...

鐵人賽 Modern Web DAY 3

技術 Day 03 | Canvas 的基礎

Canvas 到底怎麼用? canvas 是一種 HTML 的標籤,它在 flash 式微消失後成為在網頁上創作的主要手段。 很多 2D 圖像的表現都可以用...

鐵人賽 JavaScript DAY 9

技術 【Day09】08 - Fun with HTML5 Canvas 

主題 利用 HTML 的canvas 標籤搭配 JS 做出畫布的效果。實現畫筆顏色(hsl)和粗細變化。 成果 完整程式碼Demo效果 實作重點 Javasc...