tag canvas

標籤
貢獻24
82
05:47 AM · Oct 27 ,2025
u_7726611 頭像 wsy996 頭像 k21vin 頭像 beckyyyy 頭像 xiaohe0601 頭像 grapecity 頭像 liweihao_5f8e96c308646 頭像 zhoumo_62382eba4b454 頭像 tanking 頭像 zhipanyun 頭像 cason6810 頭像 tao_999 頭像

@canvas / 博客 RSS 訂閱

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

收藏 評論

zhipanyun 頭像

小盼田 - canvas 2 image的使用小心得

在開發中遇到一個設置透明色的需求，大概描述就是一張圖，然後再給一個顏色，把這個圖片上所有這個顏色的像素點設置為透明色，如下圖 實現思路就是將圖片畫到canvas上，然後遍歷圖片像素信息，將指定的rgb的alpha設置為0，即設置為全透明。 const canvas = document.createElement('canvas'); const context = canv

base64 , canvas

收藏 評論

u_7726611 頭像

科技之巔 - 【Canvas與旗幟】烏克蘭旗圓盤

【成圖】 【代碼】 !DOCTYPE html html lang="utf-8" meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ head title烏克蘭旗圓盤/title style type="text/c

旗幟 , 代碼人生 , canvas

收藏 評論

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="text/css"

橫匾 , 代碼人生 , canvas

收藏 評論

tao_999 頭像

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

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

canvas , 前端 , Javascript

收藏 評論

wonfody 頭像

Wonfody - JS技巧 - Canvas中繪製特殊字符

在canvas中繪製特殊符號，最簡單也最實用的方式就是使用 字符 ，以 fillText 的方式進行繪製。當然如果對特殊符號的樣式有特殊要求，使用圖片也是不錯的選擇。這裏只介紹字符繪製方式。 方案一：代碼中直接使用特殊字符 以win10系統為例，在代碼輸入過程中（切換為中文）可以點擊候選詞後面的笑臉圖標，打開特殊字符選擇面板： 在彈出面板中選擇你需要的特殊字符即可自動鍵入到代碼中： 下面

符號 , 字符編碼 , canvas , unicode

收藏 評論

musicfe 頭像

雲音樂技術團隊 - 社交直播遊戲場景前端解決方案專欄（一）：關於Alice.js的起點

本文作者：QHC 前言： 長久以來，傳統前端的工作大多時候在與DOM打交道，近年來，瀏覽器廠商也在不斷努力提高DOM渲染性能，以提高用户體驗。但是更多複雜場景的出現，例如近幾年隨着在線直播、社交娛樂、各種小遊戲的火爆，前端性能的關注度持續提高。特別是遊戲場景，而我們團隊也面臨着一大波h5遊戲化場景，那麼這個系列文章，將帶讀者朋友們一起了解，雲音樂社交直播業務的遊戲化場景解決方案的整體思路與落地案例

dom , canvas , 前端

收藏 評論

beckyyyy 頭像

beckyyyy - 可視化學習：WebGL實現簡易的局部“馬賽克”

前言 接觸過Canvas的小夥伴應該都知道，在Canvas2D中我們要加載一個圖片很簡單，通過調用drawImage API就能將圖像繪製到畫布上，當然在WebGL中我們也可以繪製圖像，在繪製時我們需要用到WebGL中的紋理對象，在之前WebGL實現網格背景的文章中，我使用了一個叫做紋理座標的配置，現在要完成紋理的加載我們也需要用到紋理座標，並且我們可以通過對紋理座標處理實現簡單的”馬賽克“效果。

webgl , canvas , 可視化 , 前端

收藏 評論

beckyyyy 頭像

beckyyyy - 可視化學習：使用極座標參數方程和SDF繪製有趣的圖案

前言 本文將介紹如何使用極座標參數方程和上一篇文章提到的距離場SDF來繪製有趣的圖案。 説到曲線和幾何圖形的繪製，我們知道圖形系統默認支持的是通過直角座標繪製，但是有些曲線呢，不太容易使用直角座標系來表示，卻可以很方便地使用極座標來表示，這個時候我們可以選擇通過極座標和直角座標的相互轉換，來實現圖形的繪製。 下面我就用玫瑰線、花瓣線等曲線作為例子來進行演示。 在開始演示之前，我先簡單介紹下極座標和

webgl , canvas , 可視化 , 前端

收藏 評論

beckyyyy 頭像

beckyyyy - 可視化學習：如何使用後期處理通道增強圖像效果

前言 大家好，本文分享的是如何使用後期處理通道增強圖像效果，通過前面幾篇文章，我們瞭解了一些動態生成紋理的方法，比如符號距離場SDF、基於參數方程生成圖案、基於噪聲生成紋理，等等。這些生成紋理的技術有相似的地方，就是根據片元的紋理座標，對片元着色，直接生成紋理。 因為GPU是並行渲染的，每個像素的着色器程序是並行執行的，這樣的渲染很高效。但是在實際需求中，有時我們計算片元色值時，需要依賴周圍像素點

webgl , canvas , 可視化 , 前端

收藏 評論

grapecity 頭像

葡萄城技術團隊 - 解析Html Canvas的卓越性能與高效渲染策略

一、什麼是Canvas 想必學習前端的同學們對Canvas 都不陌生，它是 HTML5 新增的“畫布”元素，可以使用JavaScript來繪製圖形。 Canvas元素是在HTML5中新增的標籤用於在網頁實時生成圖像，並且可以操作圖像內容，基本上它是一個可以用JavaScript操作的位圖（bitmap）。Canvas 由一個可繪製區域HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼

canvas

收藏 評論

zz_641473ad470bc 頭像

zZ_jie - 使用canvas對圖片進行標註

前言 我們的圖像標註系統中，標註的時候，每人需要一個容器（docker），需要把數據推到去LabelStudio裏面去標註，利用webhook回推標註好的數據。 Canvas的使用，當選中某個矩形框的時候，會變成藍色。 畫布大小 設置的是，圖片有多大，畫布就有多大,然後以畫布的中心點對齊。默認是左上角對齊 this.ctx.drawImage(this.image, -this.image

canvas , HTML , 前端

收藏 評論