来源：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）:图像处理和绘制文字
