tag canvas

標籤
貢獻23
72
05:47 AM · Oct 27 ,2025
u_7726611 頭像 wsy996 頭像 k21vin 頭像 beckyyyy 頭像 xiaohe0601 頭像 grapecity 頭像 zhoumo_62382eba4b454 頭像 tanking 頭像 zhipanyun 頭像 asmallwhitecat 頭像 cason6810 頭像 musicfe 頭像

@canvas / 博客 RSS 訂閱

wsy996 頭像

萬少 - 鴻蒙元服務實戰-笑笑五子棋（3）

鴻蒙元服務實戰-笑笑五子棋（3） 接上篇。上一篇主要講解了元服務的創建和 canvas 的一些基本使用，直線、矩形、弧形、文本、圖像等。canvas 本身還有很多其他 的功能。這裏繼續圍繞 canvas 進行講解。 createPattern createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern |

canvas , harmonyos

收藏 評論

daishuyunshuzhanqianduan 頭像

袋鼠雲數棧UED - 流程圖渲染方式：Canvas vs SVG

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霽明 背景 我們產品中會有一些流程圖應用，例如審批中心的審批流程圖： 我們數棧產品內的流程圖，基本都是使用的 mxGraph 實現的，mxGraph 使用了SVG來渲染圖形。 流程圖組件庫除了 mxGraph，還有其他一些流行的庫，例如：Re

canvas , 前端 , svg

收藏 評論

smallhuifei 頭像

smallStone - canvas實現一個部分滾動，特殊圖表

餅圖直接用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

canvas , 前端

收藏 評論

renzhongdaoyuan_59170ca258c53 頭像

零一行者 - 手把手教你繪製小程序海報

海報分享功能在許多應用中應該是很常見的，因為它作為一種常用的應用推廣和拉新的方式。 接下來看個實際的案例，如下： 把任務拆解下： 如何繪製海報 如何把繪製後的海報保存到相冊 繪製海報 用 canvas 來繪製海報。 這裏需要了解基本的 canvas api，不熟悉可以先去了解下相關 Canvas API 定義 canvas 元素 template view class="

小程序 , 海報渲染 , canvas , 前端 , Javascript

收藏 評論

kaidiwen 頭像

Max迪丶先生 - 解決uniapp生成自定義海報/邀請名片，保存圖片到本地

本代碼片段使用插件《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

二維碼 , uniapp , vue3 , qrcode , canvas

收藏 評論

grapecity 頭像

葡萄城技術團隊 - 突破Canvas困境：低成本實現Web端流程圖設計功能之道

最新技術資源（建議收藏） https://www.grapecity.com.cn/resources/ 前言 相信大家在職場中經常會用到流程圖，在互聯網行業，繪製流程圖不論在產品的設計階段，還是後期優化業務流程的階段，都有着巨大的價值。事實上，不僅是互聯網行業，流程圖其實廣泛應用於各行各業。 比如説，銀行在辦理開户業務時，會有一套較為複雜的流程，中間不僅有固定的步驟，如審核材料、打印

canvas

收藏 評論

jiuliangxiaodeshuanggang 頭像

SKcakor - qml實現頭像裁剪功能

效果 首先了解一下flickable flickable在確定高度寬度後，使用contentWidth,contentHeight綁定內容大小，當內容大小大於flickable大小時，flickable會自動提供滾動條以便鼠標拖動查看。 所以打開一個圖片後要先調整適合flickable，前提是保持比例，不然根據圖片的比例縮放. 假設flickable是一個正方形，如果圖片長寬比為1:2等，

qt , qml , canvas

收藏 評論

shuirongshui 頭像

水冗水孚 - vue3中實現live2D技術的應用虛擬角色數字人live2d-render、pixi-live2d-display

什麼是live2D技術？可以用來做什麼？ 請點擊看效果：http://ashuai.work:8890/#/16 簡而言之： 可以用來創建虛擬角色、數字人的技術 達到類似於動漫、插畫、遊戲中的人物效果 可動作交互、語音發聲 可以用到的平台很多，比如Web、Native、Unity、遊戲引擎、JAVA等平台 就前端而言，3D項目使用threejs，2D項目使用pixijs 所以，pix

虛擬現實 , vue3 , canvas , Javascript

收藏 評論

wsy996 頭像

萬少 - 鴻蒙元服務實戰-笑笑五子棋（2）

鴻蒙元服務實戰-笑笑五子棋（2） 章節導讀 本章節主要講解如何創建元服務和使用 canvas 描繪圖形 目標 上一章最後講到了 笑笑五子棋 主要的技術棧如下： ArkTS API 12 Canvas 元服務獨有的 AtomicServiceTabs 卡片開發 元服務的創建 元服務的上架 那麼本章節就開始實現這個案例。 AGC 平台上創建元服務 需要先在AGC平台上項目，然後再新建

canvas , harmonyos

收藏 評論

suporka 頭像

suporka - “山寨版”《草料二維碼》

背景 之前瀏覽過草料二維碼的網站，他的二維碼美化功能很強大，可以分別自定義碼眼和碼點的形狀和顏色，功能十分強大 💪！ 碰巧之前寫過一個 npm 插件 qrcode-with-logos, 用於前端生成帶 logo 的二維碼。 而且在 github 的 issues 裏有外國友人 👨‍🦱 問我能否實現不同樣式的二維碼，剛好以此作為新需求，模仿草料二維碼的樣式和功能，開發了 qrcode-wit

canvas , 前端 , Javascript

收藏 評論

wsy996 頭像

萬少 - 鴻蒙元服務實戰-笑笑五子棋（4）

鴻蒙元服務實戰-笑笑五子棋（4） 我們在這一章節主要實現五子棋的基本邏輯 核心目錄結構 ├─ets │ ├─entryability │ │ EntryAbility.ets │ │ │ ├─entryformability │ │ EntryFormAbility.ets │ │ │ ├─pages │ │ Index.ets │ │ │ ├─v

canvas , harmonyos

收藏 評論

wsy996 頭像

萬少 - 鴻蒙元服務實戰-笑笑五子棋（5）

鴻蒙元服務實戰-笑笑五子棋（5） 來到最後一章了，這一章節講兩個部分。一是笑笑五子棋的卡片製作，二就是發佈上架。 卡片介紹 Form Kit（卡片開發框架）提供了一種在桌面、鎖屏等系統入口嵌入顯示應用信息的開發框架和 API，可以將應用內用户關注的重要 信息或常用操作抽取到服務卡片（以下簡稱“卡片”）上，通過將卡片添加到桌面上，以達到信息展示、服務直達的便捷體驗效果。 新建卡片 卡片類型分為兩種

canvas , harmonyos

收藏 評論

huanjinliu 頭像

歡進 - 開源 | Warpvas 實現扭曲的畫布

介紹 名字靈感源於 warped + canvas，扭曲的畫布。 畫布可以被扭曲嗎？ 如果你使用過canvas，可能你對setTransform API也有所瞭解，那你可能會給出一個偏消極的答案：只能整體傾斜變形，但做不到扭曲變形。 但這真的做不到嗎？ 我們可以先來想一個問題：如果對於一個方方正正的圖像來説，setTransform API施加的變形效果只能作用於整體，那如果把它從斜對角切成兩份三

webgl , canvas , typescript , 前端 , Javascript

收藏 評論

k21vin 頭像

德育處主任 - p5.js 圓（circle）的用法

點贊 + 關注 + 收藏 = 學會了 如果你剛接觸 p5.js，想知道怎麼畫一個圓，那 circle() 函數就是最適合的入門工具。它簡單到只需要 3 個參數就能畫出一個圓，甚至能輕鬆擴展出彩色、動畫等效果。 circle()的基礎語法 circle() 是 p5.js 專門用來畫圓形的函數 —— 就像現實中用圓規畫圓一樣，只要確定 “中心點” 和 “大小”，就能立刻畫出一個標準的圓。 它可以用來

canvas

收藏 評論

k21vin 頭像

德育處主任 - p5.js 線段的用法

線段是最基礎的圖形元素，就像畫畫時的 “線條”—— 用它可以勾勒輪廓、連接形狀，甚至組合出複雜的圖案。p5.js 的 line() 函數能輕鬆畫出線段，語法比原生 Canvas 要好理解多了。 認識 line ()：線段的 “繪圖指令” 什麼是 line ()？ line() 是 p5.js 中用於繪製線段的函數，作用就像用直尺在兩點之間畫一條直線。它是最基礎的繪圖工具之一，也是組合複雜圖形的 “

p5.js , canvas

收藏 評論

k21vin 頭像

德育處主任 - p5.js 從零開始創建 3D 模型，createModel入門指南

點贊 + 關注 + 收藏 = 學會了 如果你已經開始探索 p5.js 的 3D 世界，那麼createModel()這個 API 絕對是你需要掌握的強大工具。它允許你創建自定義的 3D 幾何模型，為你的創意提供無限可能。 什麼是 createModel ()？ createModel() 用於從一個 OBJ 或 STL 格式的 字符串 中加載 3D 模型，並返回一個 p5.Geometry 對象。

p5.js , canvas

收藏 評論

cason6810 頭像

cason6810 - Vue 項目一種簡單添加水印的方法

Vue 項目中動態添加水印的實現方式 實現思路：Canvas 大法好 水印這個東西，説白了就是一些半透明的文字或者圖案，覆蓋在頁面內容之上。我們這次請出 Canvas 這位重量級嘉賓。Canvas 就像一個畫布，我們可以在上面隨意塗鴉，然後把它當作背景圖貼到頁面上。 核心代碼實現： setWaterMark() { // 創建一個看不見的"畫布" const canvas = do

canvas

收藏 評論

xiaohe0601 頭像

xiaohe0601 - ⚪️ 五子棋加入道具系統是一種什麼體驗？我用 TRAE SOLO 實現了！

最近刷到 不如摸魚去 使用 TRAE SOLO 復刻了坦克大戰，他説彷彿捉住一隻嘶鳴的蟬，便攥緊了整個童年的夏天。 現在已經是冬天了，四川冬天的冷就像是“魔法攻擊“，雖然温度不如北方那麼低，但是寒意總會穿透衣服滲入到你的身體裏。每天早上蹬共享單車上班的我，在寒風中總會想如果現在是夏天就好了，我也要用 TRAE SOLO 做一個遊戲，我也想要抓住整個夏天！ 奈何沒有 TRAE SOLO 資格，一直不

遊戲開發 , 人工智能 , canvas , typescript , 前端

收藏 評論

tao_999 頭像

tao_999 - 【前端框架】ZryaJS – 2D 遊戲引擎

ZryaJS 是一個極簡、可擴展、類 Flame 風格的 2D 遊戲引擎，基於 Canvas2D 渲染，包含： 世界/相機/組件體系 精靈渲染 文本渲染 輸入系統（Pointer / Keyboard） 粒子系統 特效系統（抖屏、閃爍） 物理引擎（基礎） 碰撞系統（AABB） Overlay 層 Layout/UI LayerManager 資源緩存（ResourceCa

canvas , 前端 , Javascript

收藏 評論

xiaohe0601 頭像

xiaohe0601 - 🧸 前端不是隻會寫管理後台，我用 400 行代碼畫了一個 LABUBU ！

注意看，這個男人叫小何，別小看他，每天晚上 9 點 59 分他都準時打開泡泡瑪特小程序蹲守 LABUBU 搶購。就在剛才，屏幕時鐘倒計時又到 00:00:00 了，他立刻開始狂戳屏幕上的「立即購買」按鈕，切換「購買方式」反覆刷新庫存，熟練的讓人心疼。 可是，現實卻從來沒有什麼“功夫不負有心人”，有的只是無數“黃牛”揮舞着自己的“科技”與小何同台競技。毫無意外，今天的小何依然沒有勝利，看着屏幕上的「

vue.js , canvas , typescript , 前端

收藏 評論

u_7726611 頭像

科技之巔 - 【Canvas與玻璃光】鋁圈紅燈

【成圖】 【代碼】 !DOCTYPE html html lang="utf-8" meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ head title鋁圈紅燈 Draft1/title style type="t

玻璃光 , 代碼人生 , canvas

收藏 評論

u_7726611 頭像

科技之巔 - 【Canvas/標誌】中國鐵路標誌

【成圖】 【代碼】 !DOCTYPE html html lang="utf-8" meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ head title1402.鐵路標誌 Draft7 上色/title style

鐵路 , 代碼人生 , canvas

收藏 評論

zhoumo_62382eba4b454 頭像

perkz - React Native Canvas

思路：React-Native自己是沒有Canvas，可以利用react-native-webview注入html做一個Canvas，把寫入Webview的html作為可變的字符串，每寫一條canvas就在字符串上的script標籤裏添加對應的語句，每一次添加都是異步的，通過onMessage去獲取Webview往外傳的值 初始化一個html頁面 window.onload裏去執行我

react-native , webview , canvas , Javascript

收藏 評論

tanking 頭像

TANKING - html2canvas將指定區域導出為圖片（js將div導出為圖片）

如何使用JS截取HTML頁面為圖片呢，html2canvas.js這個插件可以輕鬆實現。這個原理很簡單，就是html2canvas.js可以將當頁面渲染成一個Canvas圖片，然後保存下來即可。它不需要來自服務器任何渲染，整張圖片都是在客户端瀏覽器創建。 代碼 !DOCTYPE html html head meta charset="utf-8" meta http-equiv="X-

html2canvas , canvas , HTML , 前端 , Javascript

收藏 評論