基于canvas基础学习笔记（一）的学习，首先从绘制一片星空开始：

一、星空绘制

<script type="text/javascript">
       window.onload=function(){
       var canvas=document.getElementById('canvas');
       canvas.width=800;
       canvas.height=800;
       var context=canvas.getContext('2d');

       //*******************************星空绘制
       context.fillStyle="black";
       context.fillRect(0,0,canvas.width,canvas.height);

       //************************************绘制多个不同的星星
       for(var i=0;i<200;i++){
        var R=Math.random()*10+10;
        var x=Math.random()*canvas.width;
        var y=Math.random()*canvas.height;
        var a=Math.random()*360;
        drawStar(context,R/2.0,R,x,y,a);
       }
   }
      //rot为旋转的角度  -rot是顺时针转
      function drawStar(cxt,r,R,X,Y,rot){
       cxt.beginPath();
       for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+X,-Math.sin((18+i*72-rot)/180*Math.PI)*R+Y);
            cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+X,-Math.sin((54+i*72-rot)/180*Math.PI)*r+Y);
       }
       cxt.closePath();
       cxt.fillStyle="#fb3";
       cxt.strokeStyle="#fd5";
       cxt.lineWidth=3;
       cxt.lineJoin="round";
       cxt.fill();
       cxt.stroke();
      }
</script>

二、图形变换

位移：translate(x,y);
旋转：rotate(deg);
缩放：scale(sx,sy);
注：1.用translate(x,y)进行位移变换时，会产生叠加，用context.save()解决。（context.save()是一种保持绘图状态的方法）
2.用scale(sx,sy)进行缩放时，会将图形的大小、边框以及位置都进行缩放，同样用context.save()解决。

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=800;
       canvas.height=800;
    
       var context=canvas.getContext('2d');


       /*问题：会出现translate的叠加
       context.fillStyle="red";
       context.translate(100,100),
       context.fillRect(0,0,400,400);

       context.fillStyle="green";
       context.translate(300,300),
       context.fillRect(0,0,400,400);
      */


      /* 解决办法一
       context.fillStyle="red";
       context.translate(100,100),
       context.fillRect(0,0,400,400);
       context.translate(-100,-100),

       context.fillStyle="green";
       context.translate(300,300),
       context.fillRect(0,0,400,400);
      }
      */

       /* 解决办法二*/
       context.save();
       context.fillStyle="red";
       context.translate(100,100),
       context.fillRect(0,0,400,400);
       context.restore();
       
       context.save();
       context.fillStyle="green";
       context.translate(300,300),
       context.fillRect(0,0,400,400);
       context.restore();
      }  
</script>

三、变换矩阵

变换矩阵.jpg

设置变换矩阵：transform(a,b,c,d,e,f)
注：在设置变换矩阵时，会叠加上次产生的效果，用setTransform（a,b,c,d,e,f）设置时会自动忽略掉之前设置的效果。

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=1200;
       canvas.height=800;
    
       var context=canvas.getContext('2d');
       //开始编码
       context.fillStyle="red";
       context.strokeStyle="#058";
       context.lineWidth="5";

       //a c e    
       //b d f
       //0 0 1
       //a——水平缩放 b——水平倾斜  c——垂直倾斜  d——垂直缩放 e——水平位移  f——垂直位移
       context.save();
       //context.transform(1,0,0,1,0,0);
       context.transform(2,0.2,0.2,1.5,50,100);
       context.fillRect(50,50,300,300);
       context.strokeRect(50,50,300,300);
       context.restore();
  }
</script>

四、填充样式——fillStyle

1.线性渐变（定义在两点之间）
分两步进行设置：
第一步：确定渐变方向
var grd=context.context.createLinearGradient(xstart,ystart,xend,yend);
第二步：设置关键颜色位置和渐变色
grd.addColorStop(stop,color);

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
       canvas.width=800;
       canvas.height=800;
    
       var context=canvas.getContext('2d');
       /*两个色的渐变
       var linearGrad=context.createLinearGradient(0,0,800,800);//渐变方向
       linearGrad.addColorStop(0.0,'#fff');
       linearGrad.addColorStop(1.0,'#000');
       context.fillStyle=linearGrad;
       context.fillRect(0,0,800,800);
       */
       //多个颜色渐变
       var linearGrad=context.createLinearGradient(0,0,800,0);//水平渐变方向
       linearGrad.addColorStop(0.0,'white');
       linearGrad.addColorStop(0.25,'yellow');
       linearGrad.addColorStop(0.5,'green');
       linearGrad.addColorStop(0.75,'blue');
       linearGrad.addColorStop(1.0,'black');
       context.fillStyle=linearGrad;
       context.fillRect(0,0,800,800);
  }
</script>

2.径向渐变（放射状渐变，定义在两个同心圆上）
分两步进行设置：
第一步：确定渐变的圆心，半径
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);
第二步：设置关键颜色位置和渐变色
grd.addColorStop(stop,color);

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
       canvas.width=800;
       canvas.height=800;

       var context=canvas.getContext('2d');
     
       //开始编码
       var radialGrad=context.createRadialGradient(400,400,0,400,400,500);
       radialGrad.addColorStop(0.0,'white');
       radialGrad.addColorStop(0.25,'yellow');
       radialGrad.addColorStop(0.5,'green');
       radialGrad.addColorStop(0.75,'blue');
       radialGrad.addColorStop(1.0,'black');
       context.fillStyle=radialGrad;
       context.fillRect(0,0,800,800);
  }
</script>

3.使用图片、画布或video填充
使用图片填充：context.createPattern(img,repeat-style);
repeat-style包含三个值：no-repeat、repeat-x、repeat-y、repeat.
使用画布填充：context.createPattern（canvas,repeat-style);
使用视频填充：context.createPattern（video,repeat-style);

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=800;
       canvas.height=800;
    
       var context=canvas.getContext('2d');

       //开始编码 
       var backgroundImage=new Image();
       backgroundImage.src="img/1.jpg";
       backgroundImage.onload=function(){
        var pattern=context.createPattern(backgroundImage,"repeat");
        context.fillStyle=pattern;
        context.fillRect(0,0,800,800);
       }
  }
</script>