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）:图像处理和绘制文字
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
A Diffusion Model Tutorial Worth Your Time, from Purdue University
Apr 07, 2024 am 09:01 AM
Diffusion can not only imitate better, but also "create". The diffusion model (DiffusionModel) is an image generation model. Compared with the well-known algorithms such as GAN and VAE in the field of AI, the diffusion model takes a different approach. Its main idea is a process of first adding noise to the image and then gradually denoising it. How to denoise and restore the original image is the core part of the algorithm. The final algorithm is able to generate an image from a random noisy image. In recent years, the phenomenal growth of generative AI has enabled many exciting applications in text-to-image generation, video generation, and more. The basic principle behind these generative tools is the concept of diffusion, a special sampling mechanism that overcomes the limitations of previous methods.
Generate PPT with one click! Kimi: Let the 'PPT migrant workers' become popular first
Aug 01, 2024 pm 03:28 PM
Kimi: In just one sentence, in just ten seconds, a PPT will be ready. PPT is so annoying! To hold a meeting, you need to have a PPT; to write a weekly report, you need to have a PPT; to make an investment, you need to show a PPT; even when you accuse someone of cheating, you have to send a PPT. College is more like studying a PPT major. You watch PPT in class and do PPT after class. Perhaps, when Dennis Austin invented PPT 37 years ago, he did not expect that one day PPT would become so widespread. Talking about our hard experience of making PPT brings tears to our eyes. "It took three months to make a PPT of more than 20 pages, and I revised it dozens of times. I felt like vomiting when I saw the PPT." "At my peak, I did five PPTs a day, and even my breathing was PPT." If you have an impromptu meeting, you should do it
All CVPR 2024 awards announced! Nearly 10,000 people attended the conference offline, and a Chinese researcher from Google won the best paper award
Jun 20, 2024 pm 05:43 PM
In the early morning of June 20th, Beijing time, CVPR2024, the top international computer vision conference held in Seattle, officially announced the best paper and other awards. This year, a total of 10 papers won awards, including 2 best papers and 2 best student papers. In addition, there were 2 best paper nominations and 4 best student paper nominations. The top conference in the field of computer vision (CV) is CVPR, which attracts a large number of research institutions and universities every year. According to statistics, a total of 11,532 papers were submitted this year, and 2,719 were accepted, with an acceptance rate of 23.6%. According to Georgia Institute of Technology’s statistical analysis of CVPR2024 data, from the perspective of research topics, the largest number of papers is image and video synthesis and generation (Imageandvideosyn
From bare metal to a large model with 70 billion parameters, here is a tutorial and ready-to-use scripts
Jul 24, 2024 pm 08:13 PM
We know that LLM is trained on large-scale computer clusters using massive data. This site has introduced many methods and technologies used to assist and improve the LLM training process. Today, what we want to share is an article that goes deep into the underlying technology and introduces how to turn a bunch of "bare metals" without even an operating system into a computer cluster for training LLM. This article comes from Imbue, an AI startup that strives to achieve general intelligence by understanding how machines think. Of course, turning a bunch of "bare metal" without an operating system into a computer cluster for training LLM is not an easy process, full of exploration and trial and error, but Imbue finally successfully trained an LLM with 70 billion parameters. and in the process accumulate
AI in use | AI created a life vlog of a girl living alone, which received tens of thousands of likes in 3 days
Aug 07, 2024 pm 10:53 PM
Editor of the Machine Power Report: Yang Wen The wave of artificial intelligence represented by large models and AIGC has been quietly changing the way we live and work, but most people still don’t know how to use it. Therefore, we have launched the "AI in Use" column to introduce in detail how to use AI through intuitive, interesting and concise artificial intelligence use cases and stimulate everyone's thinking. We also welcome readers to submit innovative, hands-on use cases. Video link: https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ Recently, the life vlog of a girl living alone became popular on Xiaohongshu. An illustration-style animation, coupled with a few healing words, can be easily picked up in just a few days.
A must-read for technical beginners: Analysis of the difficulty levels of C language and Python
Mar 22, 2024 am 10:21 AM
Title: A must-read for technical beginners: Difficulty analysis of C language and Python, requiring specific code examples In today's digital age, programming technology has become an increasingly important ability. Whether you want to work in fields such as software development, data analysis, artificial intelligence, or just learn programming out of interest, choosing a suitable programming language is the first step. Among many programming languages, C language and Python are two widely used programming languages, each with its own characteristics. This article will analyze the difficulty levels of C language and Python
Counting down the 12 pain points of RAG, NVIDIA senior architect teaches solutions
Jul 11, 2024 pm 01:53 PM
Retrieval-augmented generation (RAG) is a technique that uses retrieval to boost language models. Specifically, before a language model generates an answer, it retrieves relevant information from an extensive document database and then uses this information to guide the generation process. This technology can greatly improve the accuracy and relevance of content, effectively alleviate the problem of hallucinations, increase the speed of knowledge update, and enhance the traceability of content generation. RAG is undoubtedly one of the most exciting areas of artificial intelligence research. For more details about RAG, please refer to the column article on this site "What are the new developments in RAG, which specializes in making up for the shortcomings of large models?" This review explains it clearly." But RAG is not perfect, and users often encounter some "pain points" when using it. Recently, NVIDIA’s advanced generative AI solution
The digital life plan in the wandering earth has been launched? DeepMind creates fruit flies in computers, netizens: Can it create humans?
Mar 18, 2024 pm 03:20 PM
"Question Tu Hengyu, understand Tu Hengyu, and become Tu Hengyu." In "The Wandering Earth 2", Andy Lau played an impressive role as Tu Hengyu. In order to let his daughter who died in a car accident have a "complete life", he ignored the human world's ban on the "Digital Life Project" and has been secretly working alone to improve the structure of digital life, and finally decided to openly violate the rules and upload his daughter's data to quantum computers, and was later imprisoned for it. The digital life map Yaya in the movie "The Wandering Earth 2". After the movie was released, there has been a lot of discussion about the topic of "digital life". Recently, this topic has been brought up again because many people who have lost relatives and friends are trying to use AI technology to "resurrect" the deceased and produce a series of virtual videos containing the image of the deceased. one
