Home > Database > Mysql Tutorial > Canvas入门(2):图形渐变和图像形变换

Canvas入门(2):图形渐变和图像形变换

WBOY
Release: 2016-06-07 15:43:31
Original
1268 people have browsed it

来源: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>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   2:</span><span>     <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   3:</span><span>     <span>if</span> (canvas == <span>null</span>)</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   4:</span><span>     {</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   5:</span><span>         <span>return</span> <span>false</span>;</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   6:</span><span>     }</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   7:</span><span>     <span>// 获取上下文</span></span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   8:</span><span>     <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   9:</span><span>     <span>// 获取渐变对象</span></span>
Copy after login
Copy after login
<span>  10:</span><span>     <span>var</span> g1 = context.createLinearGradient(0,0,0,300);</span>
Copy after login
<span>  11:</span><span>     <span>// 添加渐变颜色</span></span>
Copy after login
Copy after login
<span>  12:</span><span>     g1.addColorStop(0,<span>'rgb(255,255,0)'</span>);</span>
Copy after login
<span>  13:</span><span>     g1.addColorStop(1,<span>'rgb(0,255,255)'</span>);</span>
Copy after login
<span>  14:</span><span>     context.fillStyle = g1;</span>
Copy after login
<span>  15:</span><span>     context.fillRect(0,0,400,300);</span>
Copy after login
<span>  16:</span><span>     <span>var</span> g2 = context.createLinearGradient(0,0,300,0);</span>
Copy after login
<span>  17:</span><span>     g2.addColorStop(0,<span>'rgba(0,0,255,0.5)'</span>);</span>
Copy after login
<span>  18:</span><span>     g2.addColorStop(1,<span>'rgba(255,0,0,0.5)'</span>);</span>
Copy after login
<span>  19:</span><span>     <span>for</span>(<span>var</span> i = 0; i</span>
Copy after login
<span>  20:</span><span>     {</span>
Copy after login
<span>  21:</span><span>         context.beginPath();</span>
Copy after login
<span>  22:</span><span>         context.fillStyle=g2;</span>
Copy after login
<span>  23:</span><span>         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, <span>true</span>);</span>
Copy after login
<span>  24:</span><span>         context.closePath();</span>
Copy after login
<span>  25:</span><span>         context.fill();</span>
Copy after login
<span>  26:</span><span>     }</span>
Copy after login

createLinearGradient(x1,y1,x2,y2):参数分别表示渐变起始位置和结束位置的横纵坐标

addColorStop(offset,color):offset表示设定的颜色离渐变起始位置的偏移量,取值范围是0~1的浮点值。渐变起始偏移量是0,渐变结束偏移量是1.color是渐变的颜色。

效果:

Canvas入门(2):图形渐变和图像形变换

2、绘制径向渐变

<span>   1:</span><span> <span>// 获取canvas 的ID</span></span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   2:</span><span>     <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   3:</span><span>     <span>if</span> (canvas == <span>null</span>)</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   4:</span><span>     {</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   5:</span><span>         <span>return</span> <span>false</span>;</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   6:</span><span>     }</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   7:</span><span>     <span>// 获取上下文</span></span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   8:</span><span>     <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   9:</span><span>     <span>// 获取渐变对象</span></span>
Copy after login
Copy after login
<span>  10:</span><span>     <span>var</span> g1 = context.createRadialGradient(400,0,0,400,0,400);</span>
Copy after login
<span>  11:</span><span>     <span>// 添加渐变颜色</span></span>
Copy after login
Copy after login
<span>  12:</span><span>     g1.addColorStop(0.1,<span>'rgb(255,255,0)'</span>);</span>
Copy after login
<span>  13:</span><span>     g1.addColorStop(0.3,<span>'rgb(255,0,255)'</span>);</span>
Copy after login
<span>  14:</span><span>     g1.addColorStop(1,<span>'rgb(0,255,255)'</span>);</span>
Copy after login
<span>  15:</span><span>     context.fillStyle = g1;</span>
Copy after login
<span>  16:</span><span>     context.fillRect(0,0,400,300);</span>
Copy after login
<span>  17:</span><span>     <span>var</span> g2 = context.createRadialGradient(250,250,0,250,250,300);</span>
Copy after login
<span>  18:</span><span>     g2.addColorStop(1,<span>'rgba(0,0,255,0.5)'</span>);</span>
Copy after login
<span>  19:</span><span>     g2.addColorStop(0.7,<span>'rgba(255,255,0,0.5)'</span>)</span>
Copy after login
<span>  20:</span><span>     g2.addColorStop(0.1,<span>'rgba(255,0,0,0.5)'</span>);</span>
Copy after login
<span>  21:</span><span>     <span>for</span>(<span>var</span> i = 0; i</span>
Copy after login
<span>  22:</span><span>     {</span>
Copy after login
<span>  23:</span><span>         context.beginPath();</span>
Copy after login
<span>  24:</span><span>         context.fillStyle=g2;</span>
Copy after login
<span>  25:</span><span>         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, <span>true</span>);</span>
Copy after login
<span>  26:</span><span>         context.closePath();</span>
Copy after login
<span>  27:</span><span>         context.fill();</span>
Copy after login
<span>  28:</span><span>     }</span>
Copy after login

createRadialGradient(x1,y1,radius1,x2,y2,radius2):x1,y1,radius1分别是渐变开始圆的圆心横纵坐标和半径。x2,y2,radius2分别是渐变结束圆的圆心横纵坐标和半径。

效果

Canvas入门(2):图形渐变和图像形变换

二、图形变换

1、坐标变换:平移、缩放和旋转

<span>   1:</span><span> <span>// 获取canvas 的ID</span></span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   2:</span><span>     <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   3:</span><span>     <span>if</span> (canvas == <span>null</span>)</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   4:</span><span>     {</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   5:</span><span>         <span>return</span> <span>false</span>;</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   6:</span><span>     }</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   7:</span><span>     <span>// 获取上下文</span></span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   8:</span><span>     <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   9:</span><span>     context.fillStyle = <span>'#eeeeff'</span>;</span>
Copy after login
<span>  10:</span><span>     context.fillRect(0,0,400,300);</span>
Copy after login
<span>  11:</span><span>     <span>// 平移坐标原点</span></span>
Copy after login
<span>  12:</span><span>     context.translate(200,50);</span>
Copy after login
<span>  13:</span><span>     context.fillStyle = <span>'rgba(255,0,0,0.25)'</span>;</span>
Copy after login
<span>  14:</span><span>     <span>for</span>(<span>var</span> i = 0; i</span>
Copy after login
<span>  15:</span><span>     {</span>
Copy after login
<span>  16:</span><span>         context.translate(25,25);</span>
Copy after login
<span>  17:</span><span>         <span>// 图形缩放</span></span>
Copy after login
<span>  18:</span><span>         context.scale(0.95,0.95);</span>
Copy after login
<span>  19:</span><span>         <span>// 图形旋转</span></span>
Copy after login
<span>  20:</span><span>         context.rotate(Math.PI / 10);</span>
Copy after login
<span>  21:</span><span>         context.fillRect(0,0,100,50);</span>
Copy after login
<span>  22:</span><span>     }</span>
Copy after login

translate(x,y):平移原点,x,y表示向左和向下移动多少单位,默认单位是像素

scale(x,y):缩放,x,y表示水平和垂直方向的缩放大小。小于1缩小,大于1放大。

rotate(angle):旋转,angle是旋转角度,单位是弧度。大于0表示顺时针旋转,反之逆时针。

效果:

Canvas入门(2):图形渐变和图像形变换

2、矩阵变换

<span>   1:</span><span> <span>// 获取canvas 的ID</span></span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   2:</span><span>     <span>var</span> canvas = document.getElementById(<span>'canvas'</span>);</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   3:</span><span>     <span>if</span> (canvas == <span>null</span>)</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   4:</span><span>     {</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   5:</span><span>         <span>return</span> <span>false</span>;</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   6:</span><span>     }</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   7:</span><span>     <span>// 获取上下文</span></span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   8:</span><span>     <span>var</span> context = canvas.getContext(<span>'2d'</span>);</span>
Copy after login
Copy after login
Copy after login
Copy after login
<span>   9:</span><span>     <span>// 定义颜色</span></span>
Copy after login
<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>
Copy after login
<span>  11:</span><span>     <span>// 定义线宽</span></span>
Copy after login
<span>  12:</span><span>     context.lineWidth = 10;</span>
Copy after login
<span>  13:</span><span>     <span>// 矩阵变换</span></span>
Copy after login
<span>  14:</span><span>     context.transform(1,0,0,1,100,0);</span>
Copy after login
<span>  15:</span><span>     <span>// 循环绘制圆弧</span></span>
Copy after login
<span>  16:</span><span>     <span>for</span> (<span>var</span> i = 0; i </span>
Copy after login

17: { //原点每次下移10个px

<span>  18:</span><span>          context.transform(1,0,0,1,0,10);</span>
Copy after login
<span>  19:</span><span>         context.strokeStyle = colors[i];</span>
Copy after login
<span>  20:</span><span>         context.beginPath();</span>
Copy after login
<span>  21:</span><span>         context.arc(50,100,100,0,Math.PI,<span>true</span>);</span>
Copy after login
<span>  22:</span><span>         context.stroke();</span>
Copy after login
<span>  23:</span><span>     }</span>
Copy after login

transform(m11,m12,m21,m22,dx,dy):改方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算。dx,dy表示原点坐标左移和下移的单位,默认是像素。

该变换矩阵格式如下

m11     m12   dx

m21      m22  dy

0            0         1

最终效果:

Canvas入门(2):图形渐变和图像形变换

总结:坐标变换的方法均可以用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):图像处理和绘制文字

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template