var grd=ctx.createLinearGradient(0,0,170,0);

         grd.addColorStop(0,'black');

         grd.addColorStop(.5,'red');

         grd.addColorStop(1,'white');

         ctx.fillStyle=grd;

         ctx.fillRect(100,100,500,500);

 <script>

     (function(){

         var canvas = document.querySelector( '#cavsElem' );

         var ctx = canvas.getContext( '2d' );

         canvas.width = 600;

         canvas.height = 600;

         canvas.style.border = "1px solid #000";

         ctx.fillStyle='rgba(255,0,0,.9)';

         ctx.shadowColor='blue';

         ctx.shaodwBlur='10';//shadowBlur 属性设置或返回阴影的模糊级数

         ctx.shadowOffsetX=10;

 //      shadowOffsetX 属性设置或返回形状与阴影的水平距离。

 //      shadowOffsetX=0 指示阴影位于形状的正下方。

 //      shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。

         ctx.shadovOffsetY=10;

         ctx.fillRect(100,100,100,100);

     }());

 </script>

 <script>

     (function() {

         var canvas = document.querySelector('#cavsElem');

         var ctx = canvas.getContext('2d');

         canvas.width = 600;

         canvas.height = 600;

         canvas.style.border = "1px solid #000";

         var rlg=ctx.createRadialGradient(300,300,10,300,300,200);//渐变开始圆的x,y坐标，半径，和渐变结束时候的状态；

         rlg.addColorStop(0,'teal');

         rlg.addColorStop(.4,'navy');

         rlg.addColorStop(1, 'purple');

         ctx.fillStyle=rlg;

         ctx.fillRect(100,100,500,500);

     }());

 </script>

 <script>

     (function(){

         var canvas = document.querySelector( '#cavsElem' );

         var ctx = canvas.getContext( '2d' );

         canvas.width = 600;

         canvas.height = 600;

         canvas.style.border = "1px solid #000";

         // ctx1： 状态1

         ctx.fillStyle = 'red';

         ctx.fillRect(10, 10, 100, 100);

         //状态 只是 上下文的一些样式的设置。

         ctx.save(); // 把当前的上下文的状态保存起来 //  状态1

         // 把当前画布移动到 200,200位置

         ctx.translate( 200, 200); //把整个画布位移到200,200

         ctx.rotate(30 * Math.PI / 180 ); //把整个画布旋转30度

         ctx.scale(2, 2); //把整个画布放大x和y方向各2倍

         ctx.globalAlpha = .3;//设置透明度           // 状态2：

         ctx.fillStyle = 'green';

         ctx.strokeStyle = 'purple';

         ctx.moveTo(0, 0);

         ctx.lineTo(400, 0);

         ctx.moveTo(0, 0);

         ctx.lineTo(0, 400);

         ctx.stroke();

         ctx.fillRect(10, 10, 40, 40);

         ctx.restore(); // 把上一次保存的ctx状态，还原。

         //当前ctx：回到  状态1

         ctx.fillRect(400, 400, 100, 100);

     }());

 </script>

 <script>

   console.log('canvas.toDataURL('image/jpeg',.6);

 </script>

 // 把canvas输出到一张图片上去

 // var img = document.getElementById('imgId');

 // img.src = canvas.toDataURL('image/png', .5);

 //把一个画布渲染到另外一个画布上。

 ctx2.drawImage(canvas1, 0, 0);