**CanvasRenderingContext2D**.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性 CanvasGradient对象。
CanvasGradient _ctx_.createLinearGradient(x0, y0, x1, y1);
x0y0x1y1
**CanvasGradient**.addColorStop() 方法添加一个由偏移值和颜色值指定的断点到渐变。如果偏移值不在0到``1之间，将抛出``INDEX_SIZE_ERR错误，如果颜色值不能被解析为有效的CSS颜色值 <color>，将抛出SYNTAX_ERR错误。
void _gradient_.addColorStop(offset, color);
0到1之间的值，超出范围将抛出INDEX_SIZE_ERR错误<color>。如果颜色值不能被解析为有效的CSS颜色值<color>，将抛出SYNTAX_ERR错误。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas3</title><script>function draw(id){var canvas = document.getElementById(id);context = canvas.getContext("2d");var g1 = context.createLinearGradient(0,0,0,300);g1.addColorStop(0,"rgb(255,255,0)");g1.addColorStop(1,"rgb(0,255,255)");context.fillStyle = g1;context.fillRect(0,0,500,500);var g2 = context.createLinearGradient(0,0,300,0);g2.addColorStop(0,"rgba(0,0,255,0.5)");g2.addColorStop(1,"rgba(255,0,0,0.5)");for(var i=0;i<10;i++){context.beginPath();context.fillStyle = g2;context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();context.fill();}}</script></head><body onload="draw(‘canvas‘)"><canvas id="canvas" width="500px" height="500px"></canvas></body></html>
**CanvasRenderingContext2D**.createRadialGradient() 是
Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回CanvasGradient。
CanvasGradient _ctx_.createRadialGradient(x0, y0, r0, x1, y1, r1);
x0y0r0x1y1CanvasGradientCanvasGradient 对象。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas4</title><script>function draw(id){var canvas = document.getElementById(id);if(canvas == null){return false;}var context = canvas.getContext("2d");var g1 = context.createRadialGradient(400,0,0,400,0,400);g1.addColorStop(0.1,"rgb(255,255,0)");g1.addColorStop(0.3,"rgb(255,0,255)");g1.addColorStop(1,"rgb(0,255,255)");context.fillStyle = g1;context.fillRect(0,0,500,500);}</script></head><body onload="draw(‘canvas‘)"><canvas id="canvas" width="500px" height="500px"></canvas></body></html>
(3)绘制变形图形
translate(x,y) 移动scale(x,y) 缩放rotate(deg) 旋转<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas5</title><script>function draw(id){var canvas = document.getElementById(id);if(canvas == null){return false;}var context = canvas.getContext("2d");context.fillStyle = "#eeeeef";context.fillRect(0,0,500,500);context.translate(200,50);context.fillStyle="rgba(255,0,0,0.25)";for(var i = 0;i<50;i++){context.translate(25,25);context.scale(0.95,0.95);context.rotate(Math.PI/10);context.fillRect(0,0,100,50);}}</script></head><body onload="draw(‘canvas‘)"><canvas id="canvas" width="500" height="500"></canvas></body></html>
原文：http://blog.csdn.net/tangxiaolang101/article/details/51365114