Canvas入门（2）:图形渐变和图像形变换
来源：http://www.ido321.com/986.html 一、图形渐变（均在最新版Google中测试） 1、绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = document.getElementById( 'canvas' ); 3: if (canvas == null ) 4: { 5: return false ; 6: } 7: // 获取上下文 8:
来源：http://www.ido321.com/986.html
一、图形渐变（均在最新版Google中测试）
1、绘制线性渐变
<span> 1:</span><span> <span>// 获取canvas 的ID</span></span>
<span> 2:</span><span> <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>
<span> 3:</span><span> <span>if</span> (canvas == <span>null</span>)</span>
<span> 4:</span><span> {</span><span> 5:</span><span> <span>return</span> <span>false</span>;</span>
<span> 6:</span><span> }</span>
<span> 7:</span><span> <span>// 获取上下文</span></span>
<span> 8:</span><span> <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>
<span> 9:</span><span> <span>// 获取渐变对象</span></span>
<span> 10:</span><span> <span>var</span> g1 = context.createLinearGradient(0,0,0,300);</span>
<span> 11:</span><span> <span>// 添加渐变颜色</span></span>
<span> 12:</span><span> g1.addColorStop(0,<span>'rgb(255,255,0)'</span>);</span>
<span> 13:</span><span> g1.addColorStop(1,<span>'rgb(0,255,255)'</span>);</span>
<span> 14:</span><span> context.fillStyle = g1;</span>
<span> 15:</span><span> context.fillRect(0,0,400,300);</span>
<span> 16:</span><span> <span>var</span> g2 = context.createLinearGradient(0,0,300,0);</span>
<span> 17:</span><span> g2.addColorStop(0,<span>'rgba(0,0,255,0.5)'</span>);</span>
<span> 18:</span><span> g2.addColorStop(1,<span>'rgba(255,0,0,0.5)'</span>);</span>
<span> 19:</span><span> <span>for</span>(<span>var</span> i = 0; i</span>
<span> 20:</span><span> {</span><span> 21:</span><span> context.beginPath();</span>
<span> 22:</span><span> context.fillStyle=g2;</span>
<span> 23:</span><span> context.arc(i*25, i*25, i*10, 0, Math.PI * 2, <span>true</span>);</span>
<span> 24:</span><span> context.closePath();</span>
<span> 25:</span><span> context.fill();</span>
<span> 26:</span><span> }</span>
createLinearGradient(x1,y1,x2,y2):参数分别表示渐变起始位置和结束位置的横纵坐标
addColorStop(offset,color):offset表示设定的颜色离渐变起始位置的偏移量，取值范围是0~1的浮点值。渐变起始偏移量是0，渐变结束偏移量是1.color是渐变的颜色。
效果：
2、绘制径向渐变
<span> 1:</span><span> <span>// 获取canvas 的ID</span></span>
<span> 2:</span><span> <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>
<span> 3:</span><span> <span>if</span> (canvas == <span>null</span>)</span>
<span> 4:</span><span> {</span><span> 5:</span><span> <span>return</span> <span>false</span>;</span>
<span> 6:</span><span> }</span>
<span> 7:</span><span> <span>// 获取上下文</span></span>
<span> 8:</span><span> <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>
<span> 9:</span><span> <span>// 获取渐变对象</span></span>
<span> 10:</span><span> <span>var</span> g1 = context.createRadialGradient(400,0,0,400,0,400);</span>
<span> 11:</span><span> <span>// 添加渐变颜色</span></span>
<span> 12:</span><span> g1.addColorStop(0.1,<span>'rgb(255,255,0)'</span>);</span>
<span> 13:</span><span> g1.addColorStop(0.3,<span>'rgb(255,0,255)'</span>);</span>
<span> 14:</span><span> g1.addColorStop(1,<span>'rgb(0,255,255)'</span>);</span>
<span> 15:</span><span> context.fillStyle = g1;</span>
<span> 16:</span><span> context.fillRect(0,0,400,300);</span>
<span> 17:</span><span> <span>var</span> g2 = context.createRadialGradient(250,250,0,250,250,300);</span>
<span> 18:</span><span> g2.addColorStop(1,<span>'rgba(0,0,255,0.5)'</span>);</span>
<span> 19:</span><span> g2.addColorStop(0.7,<span>'rgba(255,255,0,0.5)'</span>)</span>
<span> 20:</span><span> g2.addColorStop(0.1,<span>'rgba(255,0,0,0.5)'</span>);</span>
<span> 21:</span><span> <span>for</span>(<span>var</span> i = 0; i</span>
<span> 22:</span><span> {</span><span> 23:</span><span> context.beginPath();</span>
<span> 24:</span><span> context.fillStyle=g2;</span>
<span> 25:</span><span> context.arc(i*25, i*25, i*10, 0, Math.PI * 2, <span>true</span>);</span>
<span> 26:</span><span> context.closePath();</span>
<span> 27:</span><span> context.fill();</span>
<span> 28:</span><span> }</span>
createRadialGradient(x1,y1,radius1,x2,y2,radius2):x1,y1,radius1分别是渐变开始圆的圆心横纵坐标和半径。x2,y2,radius2分别是渐变结束圆的圆心横纵坐标和半径。
效果
二、图形变换
1、坐标变换：平移、缩放和旋转
<span> 1:</span><span> <span>// 获取canvas 的ID</span></span>
<span> 2:</span><span> <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>
<span> 3:</span><span> <span>if</span> (canvas == <span>null</span>)</span>
<span> 4:</span><span> {</span><span> 5:</span><span> <span>return</span> <span>false</span>;</span>
<span> 6:</span><span> }</span>
<span> 7:</span><span> <span>// 获取上下文</span></span>
<span> 8:</span><span> <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>
<span> 9:</span><span> context.fillStyle = <span>'#eeeeff'</span>;</span>
<span> 10:</span><span> context.fillRect(0,0,400,300);</span>
<span> 11:</span><span> <span>// 平移坐标原点</span></span>
<span> 12:</span><span> context.translate(200,50);</span>
<span> 13:</span><span> context.fillStyle = <span>'rgba(255,0,0,0.25)'</span>;</span>
<span> 14:</span><span> <span>for</span>(<span>var</span> i = 0; i</span>
<span> 15:</span><span> {</span><span> 16:</span><span> context.translate(25,25);</span>
<span> 17:</span><span> <span>// 图形缩放</span></span>
<span> 18:</span><span> context.scale(0.95,0.95);</span>
<span> 19:</span><span> <span>// 图形旋转</span></span>
<span> 20:</span><span> context.rotate(Math.PI / 10);</span>
<span> 21:</span><span> context.fillRect(0,0,100,50);</span>
<span> 22:</span><span> }</span>
translate(x,y):平移原点，x,y表示向左和向下移动多少单位，默认单位是像素
scale(x,y):缩放，x,y表示水平和垂直方向的缩放大小。小于1缩小，大于1放大。
rotate(angle)：旋转，angle是旋转角度，单位是弧度。大于0表示顺时针旋转，反之逆时针。
效果：
2、矩阵变换
<span> 1:</span><span> <span>// 获取canvas 的ID</span></span>
<span> 2:</span><span> <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>
<span> 3:</span><span> <span>if</span> (canvas == <span>null</span>)</span>
<span> 4:</span><span> {</span><span> 5:</span><span> <span>return</span> <span>false</span>;</span>
<span> 6:</span><span> }</span>
<span> 7:</span><span> <span>// 获取上下文</span></span>
<span> 8:</span><span> <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>
<span> 9:</span><span> <span>// 定义颜色</span></span>
<span> 10:</span><span> <span>var</span> colors = [<span>'red'</span>,<span>'orange'</span>,<span>'yellow'</span>,<span>'green'</span>,<span>'blue'</span>,<span>'navy'</span>,<span>'purple'</span>];</span>
<span> 11:</span><span> <span>// 定义线宽</span></span>
<span> 12:</span><span> context.lineWidth = 10;</span>
<span> 13:</span><span> <span>// 矩阵变换</span></span>
<span> 14:</span><span> context.transform(1,0,0,1,100,0);</span>
<span> 15:</span><span> <span>// 循环绘制圆弧</span></span>
<span> 16:</span><span> <span>for</span> (<span>var</span> i = 0; i </span>
17: { //原点每次下移10个px
<span> 18:</span><span> context.transform(1,0,0,1,0,10);</span>
<span> 19:</span><span> context.strokeStyle = colors[i];</span>
<span> 20:</span><span> context.beginPath();</span>
<span> 21:</span><span> context.arc(50,100,100,0,Math.PI,<span>true</span>);</span>
<span> 22:</span><span> context.stroke();</span>
<span> 23:</span><span> }</span>
transform(m11,m12,m21,m22,dx,dy):改方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算。dx,dy表示原点坐标左移和下移的单位，默认是像素。
该变换矩阵格式如下
m11 m12 dx
m21 m22 dy
0 0 1
最终效果：
总结:坐标变换的方法均可以用transform()代替，规则如下：
1、translate(x,y) transform(1,0,0,1,dx,dy)或transform(0,1,1,0,dx,dy)，前四个参数表示不对图形进行缩放操作。
2、scale(x,y) transform(x,0,0,y,0,0)或transform(0,y,x,0,0,0),后面两个参数表示不进行平移。
3、rotate(angle) transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0)或
transform(-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),0,0)
Canvas入门（3）:图像处理和绘制文字
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
值得你花時間看的擴散模型教程，來自普渡大學
Apr 07, 2024 am 09:01 AM
Diffusion不僅可以更好地模仿，而且可以進行「創作」。擴散模型（DiffusionModel）是一種影像生成模型。與先前AI領域大名鼎鼎的GAN、VAE等演算法，擴散模型另闢蹊徑，其主要想法是先對影像增加噪聲，再逐步去噪的過程。其中如何去噪還原原影像是演算法的核心部分。最終演算法能夠從一張隨機的雜訊影像中產生影像。近年來，生成式AI的驚人成長將文字轉換為圖像生成、視訊生成等領域的許多令人興奮的應用提供了支援。這些生成工具背後的基本原理是擴散的概念，這是一種特殊的取樣機制，克服了先前的方法中被
一鍵生成PPT！ Kimi ：讓「PPT民工」先浪起來
Aug 01, 2024 pm 03:28 PM
Kimi：一句話，十幾秒鐘，一份PPT就新鮮出爐了。 PPT這玩意兒，可太招人煩了！開個碰頭會，要有PPT；寫個週報，要做PPT；拉個投資，要展示PPT；就連控訴出軌，都得發個PPT。大學比較像是學了個PPT專業，上課看PPT，下課做PPT。或許，37年前丹尼斯・奧斯汀發明PPT時也沒想到，有一天PPT竟然如此氾濫成災。嗎嘍們做PPT的苦逼經歷，說起來都是淚。 「一份二十多頁的PPT花了三個月，改了幾十遍，看到PPT都想吐」；「最巔峰的時候，一天做了五個PPT，連呼吸都是PPT」；「臨時開個會，都要做個
CVPR 2024全部獎項公佈！近萬人線下參會，Google華人研究員獲最佳論文獎
Jun 20, 2024 pm 05:43 PM
北京時間6月20日凌晨，在西雅圖舉辦的國際電腦視覺頂會CVPR2024正式公佈了最佳論文等獎項。今年共有10篇論文獲獎，其中2篇最佳論文，2篇最佳學生論文，另外還有2篇最佳論文提名和4篇最佳學生論文提名。電腦視覺（CV）領域的頂級會議是CVPR，每年都會吸引大量研究機構和高校參會。根據統計，今年共提交了11532份論文，2719篇被接收，錄取率為23.6%。根據佐治亞理工學院對CVPR2024的數據統計分析，從研究主題來看，論文數量最多的是圖像和視頻合成與生成（Imageandvideosyn
從裸機到700億參數大模型，這裡有一個教程，還有現成可用的腳本
Jul 24, 2024 pm 08:13 PM
我們知道LLM是在大規模電腦叢集上使用海量資料訓練得到的，本站曾介紹過不少用於輔助和改進LLM訓練流程的方法和技術。而今天，我們要分享的是一篇深入技術底層的文章，介紹如何將一堆連作業系統也沒有的「裸機」變成用來訓練LLM的電腦叢集。這篇文章來自於AI新創公司Imbue，該公司致力於透過理解機器的思維方式來實現通用智慧。當然，將一堆連作業系統也沒有的「裸機」變成用於訓練LLM的電腦叢集並不是一個輕鬆的過程，充滿了探索和試錯，但Imbue最終成功訓練了一個700億參數的LLM，並在此過程中積累
AI在用 | AI製作獨居女孩生活Vlog，3天狂攬萬點讚量
Aug 07, 2024 pm 10:53 PM
機器之能報道編輯：楊文以大模型、AIGC為代表的人工智慧浪潮已經在悄悄改變我們生活及工作方式，但絕大部分人依然不知道該如何使用。因此，我們推出了「AI在用」專欄，透過直覺、有趣且簡潔的人工智慧使用案例，來具體介紹AI使用方法，並激發大家思考。我們也歡迎讀者投稿親自實踐的創新用例。影片連結：https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ最近，獨居女孩的生活Vlog在小紅書上走紅。一個插畫風格的動畫，再配上幾句治癒系文案，短短幾天就能輕鬆狂攬上
技術入門者必看：C語言和Python難易度解析
Mar 22, 2024 am 10:21 AM
標題：技術入門者必看：C語言和Python難易度解析，需要具體程式碼範例在當今數位化時代，程式設計技術已成為一項越來越重要的能力。無論是想要從事軟體開發、數據分析、人工智慧等領域，還是僅僅出於興趣學習編程，選擇一門合適的程式語言是第一步。而在眾多程式語言中，C語言和Python作為兩種廣泛應用的程式語言，各有其特色。本文將對C語言和Python的難易度進行解析
細數RAG的12個痛點，英偉達高級架構師親授解決方案
Jul 11, 2024 pm 01:53 PM
檢索增強式產生（RAG）是一種使用檢索提升語言模型的技術。具體來說，就是在語言模型生成答案之前，先從廣泛的文檔資料庫中檢索相關信息，然後利用這些信息來引導生成過程。這種技術能大幅提升內容的準確性和相關性，並能有效緩解幻覺問題，提高知識更新的速度，並增強內容生成的可追溯性。 RAG無疑是最令人興奮的人工智慧研究領域之一。有關RAG的更多詳情請參閱本站專欄文章《專補大模型短板的RAG有哪些新進展？這篇綜述講明白了》。但RAG也並非完美，使用者在使用時也常會遭遇一些「痛點」。近日，英偉達生成式AI高階解決
流浪地球裡的數位生命計畫啟動了？ DeepMind在電腦裡造果蠅，網友：能造人嗎？
Mar 18, 2024 pm 03:20 PM
「質疑圖恆宇，理解圖恆宇，成為圖恆宇。」在《流浪地球2》中，劉德華飾演的圖恆宇是一個令人印象深刻的角色。為了讓在車禍中去世的女兒擁有“完整的一生”，他不顧人類世界對“數字生命計劃”的禁令，一直在暗中獨自努力完善數字生命的架構，並最終決定公然違規，將女兒的數據上傳至量子計算機，之後因此被捕入獄。電影《流浪地球2》中的數位生命圖丫丫。電影上映後，有關「數位生命」的話題經過了許多討論。最近，這個話題被再次提起，起因是不少失去親友的人正在嘗試用AI技術「復活」逝者，製作出一系列包含逝者形象的虛擬影片。一
