Contributes15
Followers0
前言 接觸過Canvas的小夥伴應該都知道，在Canvas2D中我們要加載一個圖片很簡單，通過調用drawImage API就能將圖像繪製到畫布上，當然在WebGL中我們也可以繪製圖像，在繪製時我們需要用到WebGL中的紋理對象，在之前WebGL實現網格背景的文章中，我使用了一個叫做紋理座標的配置，現在要完成紋理的加載我們也需要用到紋理座標，並且我們可以通過對紋理座標處理實現簡單的”馬賽克“效果。
Nickname beckyyyy
前言 本文將介紹如何使用極座標參數方程和上一篇文章提到的距離場SDF來繪製有趣的圖案。 説到曲線和幾何圖形的繪製，我們知道圖形系統默認支持的是通過直角座標繪製，但是有些曲線呢，不太容易使用直角座標系來表示，卻可以很方便地使用極座標來表示，這個時候我們可以選擇通過極座標和直角座標的相互轉換，來實現圖形的繪製。 下面我就用玫瑰線、花瓣線等曲線作為例子來進行演示。 在開始演示之前，我先簡單介紹下極座標和
Nickname beckyyyy
前言 大家好，本文分享的是如何使用後期處理通道增強圖像效果，通過前面幾篇文章，我們瞭解了一些動態生成紋理的方法，比如符號距離場SDF、基於參數方程生成圖案、基於噪聲生成紋理，等等。這些生成紋理的技術有相似的地方，就是根據片元的紋理座標，對片元着色，直接生成紋理。 因為GPU是並行渲染的，每個像素的着色器程序是並行執行的，這樣的渲染很高效。但是在實際需求中，有時我們計算片元色值時，需要依賴周圍像素點
Nickname beckyyyy
本文作者：QHC 前言： 長久以來，傳統前端的工作大多時候在與DOM打交道，近年來，瀏覽器廠商也在不斷努力提高DOM渲染性能，以提高用户體驗。但是更多複雜場景的出現，例如近幾年隨着在線直播、社交娛樂、各種小遊戲的火爆，前端性能的關注度持續提高。特別是遊戲場景，而我們團隊也面臨着一大波h5遊戲化場景，那麼這個系列文章，將帶讀者朋友們一起了解，雲音樂社交直播業務的遊戲化場景解決方案的整體思路與落地案例
Nickname 雲音樂技術團隊
一、什麼是Canvas 想必學習前端的同學們對Canvas 都不陌生，它是 HTML5 新增的“畫布”元素，可以使用JavaScript來繪製圖形。 Canvas元素是在HTML5中新增的標籤用於在網頁實時生成圖像，並且可以操作圖像內容，基本上它是一個可以用JavaScript操作的位圖（bitmap）。Canvas 由一個可繪製區域HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼
Nickname 葡萄城技術團隊
前言 我們的圖像標註系統中，標註的時候，每人需要一個容器（docker），需要把數據推到去LabelStudio裏面去標註，利用webhook回推標註好的數據。 Canvas的使用，當選中某個矩形框的時候，會變成藍色。 畫布大小 設置的是，圖片有多大，畫布就有多大,然後以畫布的中心點對齊。默認是左上角對齊 this.ctx.drawImage(this.image, -this.image
Nickname zZ_jie
背景 之前瀏覽過草料二維碼的網站，他的二維碼美化功能很強大，可以分別自定義碼眼和碼點的形狀和顏色，功能十分強大 💪！ 碰巧之前寫過一個 npm 插件 qrcode-with-logos, 用於前端生成帶 logo 的二維碼。 而且在 github 的 issues 裏有外國友人 👨🦱 問我能否實現不同樣式的二維碼，剛好以此作為新需求，模仿草料二維碼的樣式和功能，開發了 qrcode-wit
Nickname suporka
餅圖直接用echarts，但下面的只能自己實現了。 !DOCTYPE html html lang="zh-cn" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titlecanvasLine/title /head style
Nickname smallStone
海報分享功能在許多應用中應該是很常見的，因為它作為一種常用的應用推廣和拉新的方式。 接下來看個實際的案例，如下： 把任務拆解下： 如何繪製海報 如何把繪製後的海報保存到相冊 繪製海報 用 canvas 來繪製海報。 這裏需要了解基本的 canvas api，不熟悉可以先去了解下相關 Canvas API 定義 canvas 元素 template view class="
@renzhongdaoyuan_59170ca258c53
Nickname 零一行者
本代碼片段使用插件《qs-canvas》，支持 Node、web、uni-app 的canvas繪圖工具。 效果圖 安裝npm包 npm install qs-canvas -S 代碼片段 // index.vue template view canvas :id="poster.canvasId" :canvas-id="poster.canvasId
Nickname Max迪丶先生
最新技術資源（建議收藏） https://www.grapecity.com.cn/resources/ 前言 相信大家在職場中經常會用到流程圖，在互聯網行業，繪製流程圖不論在產品的設計階段，還是後期優化業務流程的階段，都有着巨大的價值。事實上，不僅是互聯網行業，流程圖其實廣泛應用於各行各業。 比如説，銀行在辦理開户業務時，會有一套較為複雜的流程，中間不僅有固定的步驟，如審核材料、打印
Nickname 葡萄城技術團隊
效果 首先了解一下flickable flickable在確定高度寬度後，使用contentWidth,contentHeight綁定內容大小，當內容大小大於flickable大小時，flickable會自動提供滾動條以便鼠標拖動查看。 所以打開一個圖片後要先調整適合flickable，前提是保持比例，不然根據圖片的比例縮放. 假設flickable是一個正方形，如果圖片長寬比為1:2等，
Nickname SKcakor
什麼是live2D技術？可以用來做什麼？ 請點擊看效果：http://ashuai.work:8890/#/16 簡而言之： 可以用來創建虛擬角色、數字人的技術 達到類似於動漫、插畫、遊戲中的人物效果 可動作交互、語音發聲 可以用到的平台很多，比如Web、Native、Unity、遊戲引擎、JAVA等平台 就前端而言，3D項目使用threejs，2D項目使用pixijs 所以，pix
Nickname 水冗水孚
鴻蒙元服務實戰-笑笑五子棋（2） 章節導讀 本章節主要講解如何創建元服務和使用 canvas 描繪圖形 目標 上一章最後講到了 笑笑五子棋 主要的技術棧如下： ArkTS API 12 Canvas 元服務獨有的 AtomicServiceTabs 卡片開發 元服務的創建 元服務的上架 那麼本章節就開始實現這個案例。 AGC 平台上創建元服務 需要先在AGC平台上項目，然後再新建
Nickname 萬少
鴻蒙元服務實戰-笑笑五子棋（3） 接上篇。上一篇主要講解了元服務的創建和 canvas 的一些基本使用，直線、矩形、弧形、文本、圖像等。canvas 本身還有很多其他 的功能。這裏繼續圍繞 canvas 進行講解。 createPattern createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern |
Nickname 萬少
鴻蒙元服務實戰-笑笑五子棋（4） 我們在這一章節主要實現五子棋的基本邏輯 核心目錄結構 ├─ets │ ├─entryability │ │ EntryAbility.ets │ │ │ ├─entryformability │ │ EntryFormAbility.ets │ │ │ ├─pages │ │ Index.ets │ │ │ ├─v
Nickname 萬少
鴻蒙元服務實戰-笑笑五子棋（5） 來到最後一章了，這一章節講兩個部分。一是笑笑五子棋的卡片製作，二就是發佈上架。 卡片介紹 Form Kit（卡片開發框架）提供了一種在桌面、鎖屏等系統入口嵌入顯示應用信息的開發框架和 API，可以將應用內用户關注的重要 信息或常用操作抽取到服務卡片（以下簡稱“卡片”）上，通過將卡片添加到桌面上，以達到信息展示、服務直達的便捷體驗效果。 新建卡片 卡片類型分為兩種
Nickname 萬少
介紹 名字靈感源於 warped + canvas，扭曲的畫布。 畫布可以被扭曲嗎？ 如果你使用過canvas，可能你對setTransform API也有所瞭解，那你可能會給出一個偏消極的答案：只能整體傾斜變形，但做不到扭曲變形。 但這真的做不到嗎？ 我們可以先來想一個問題：如果對於一個方方正正的圖像來説，setTransform API施加的變形效果只能作用於整體，那如果把它從斜對角切成兩份三
Nickname 歡進
點贊 + 關注 + 收藏 = 學會了 如果你剛接觸 p5.js，想知道怎麼畫一個圓，那 circle() 函數就是最適合的入門工具。它簡單到只需要 3 個參數就能畫出一個圓，甚至能輕鬆擴展出彩色、動畫等效果。 circle()的基礎語法 circle() 是 p5.js 專門用來畫圓形的函數 —— 就像現實中用圓規畫圓一樣，只要確定 “中心點” 和 “大小”，就能立刻畫出一個標準的圓。 它可以用來
Nickname 德育處主任
線段是最基礎的圖形元素，就像畫畫時的 “線條”—— 用它可以勾勒輪廓、連接形狀，甚至組合出複雜的圖案。p5.js 的 line() 函數能輕鬆畫出線段，語法比原生 Canvas 要好理解多了。 認識 line ()：線段的 “繪圖指令” 什麼是 line ()？ line() 是 p5.js 中用於繪製線段的函數，作用就像用直尺在兩點之間畫一條直線。它是最基礎的繪圖工具之一，也是組合複雜圖形的 “
Nickname 德育處主任
點贊 + 關注 + 收藏 = 學會了 如果你已經開始探索 p5.js 的 3D 世界，那麼createModel()這個 API 絕對是你需要掌握的強大工具。它允許你創建自定義的 3D 幾何模型，為你的創意提供無限可能。 什麼是 createModel ()？ createModel() 用於從一個 OBJ 或 STL 格式的 字符串 中加載 3D 模型，並返回一個 p5.Geometry 對象。
Nickname 德育處主任
Vue 項目中動態添加水印的實現方式 實現思路：Canvas 大法好 水印這個東西，説白了就是一些半透明的文字或者圖案，覆蓋在頁面內容之上。我們這次請出 Canvas 這位重量級嘉賓。Canvas 就像一個畫布，我們可以在上面隨意塗鴉，然後把它當作背景圖貼到頁面上。 核心代碼實現： setWaterMark() { // 創建一個看不見的"畫布" const canvas = do
Nickname cason6810
我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霽明 背景 我們產品中會有一些流程圖應用，例如審批中心的審批流程圖： 我們數棧產品內的流程圖，基本都是使用的 mxGraph 實現的，mxGraph 使用了SVG來渲染圖形。 流程圖組件庫除了 mxGraph，還有其他一些流行的庫，例如：Re
Nickname 袋鼠雲數棧UED