tag canvas

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

@canvas / 博客 RSS 訂閱

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

收藏 評論

asmallwhitecat 頭像

華仔 - 我用四種方式實現某場所碼箭頭動畫（css3+canvas+svg+js）講解超詳細

大家好！我是貓小白，本期給大家帶來一個簡單的實戰demo，希望大家食用得開心，有收穫。 ==首先聲明：此demo存粹為了學習其中的動畫知識，請不要用於真實的場景，否則被JC叔叔抓起包吃包住就不應該了瑟！== 此項目基於==成都天府健康通==，其它地區的場所碼不知道是否有類似的動畫，如果沒有也沒關係，可以學習下是如何實現的。 為啥子要做這個呢？那是因為有一天我出去買菜，回來保安叔叔恩是要

vue.js , css3 , canvas , svg動畫 , Javascript

收藏 評論

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

收藏 評論

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 , 前端

收藏 評論