HTML5动画----canvas基础6（2定义颜色和样式、绘制图案）

定义颜色和样式：context.fillStyle 和 context.strokeStyle

//填充和轮廓的颜色：context.fillStyle="red" context.strokeStyle="dark";
            //线型：线条的粗细、端点样式、两线段连接处样式、绘制交点的方式lineWidth,lineCap,lineJoin,miterLimit
            function draw(){
            var ctx = document.getElementById("myCanvas").getContext('2d');
             //1.设置线条粗细lineWidth()
//             for(var i=0;i<10;i++){
//                 ctx.strokeStyle="red";
//                 ctx.lineWidth=1+i;
//                 ctx.beginPath();
//                 ctx.moveTo(5,5+i*14);
//                 ctx.lineTo(200,5+i*14);
//                 ctx.stroke();
//             }
            //2.设置端点样式ctx.lineCap,包括butt、round、square，默认butt
//          var lineCap=['butt','round','square'];
//          //绘制参考性
//          ctx.strokeStyle='red';
//          ctx.beginPath();
//          ctx.moveTo(10,10);
//          ctx.lineTo(10,150);
//          ctx.moveTo(150,10);
//          ctx.lineTo(150,150)
//          ctx.stroke();
//          //绘制直线段
//          ctx.strokeStyle="blue";
//          for(var i=0;i<lineCap.length;i++){
//              ctx.lineWidth=20;
//              ctx.lineCap=lineCap[i];
//              ctx.beginPath();
//              ctx.moveTo(10,30+i*50);
//              ctx.lineTo(150,30+i*50);
//              ctx.stroke();
//          }
         //3.设置连接处样式lineJoin: round\bevel\miter 默认miter
//          var lineJoin=['round','bevel','miter'];
//          ctx.strokeStyle="blue";
//          for(var i=0;i<lineJoin.length;i++){
//              ctx.lineWidth=20;
//              ctx.lineJoin=lineJoin[i];
//              ctx.beginPath();
//              ctx.moveTo(10+i*150,30);
//              ctx.lineTo(100+i*150,30);
//              ctx.lineTo(100+i*150,100);
//              ctx.stroke();
//          }
        //4.miterLimit设置绘制交点的方式  
 //(只针对lineJoin为miter，设置miterLimit，为斜面的长度设置一个上限，默认为10,即斜面的宽度不超过线宽的10倍)
            for(var i=0;i<10;i++){
                ctx.strokeStyle="blue";
                ctx.lineWidth=10;
                ctx.lineJoin='miter';
                ctx.miterLimit=i*10;
                ctx.beginPath();
                ctx.moveTo(10,i*30);
                ctx.lineTo(100,i*30);
                ctx.lineTo(10,i*33);
                ctx.stroke();
            }
            }
            window.οnlοad=function(){
                draw();
            }
        </script>
        <canvas id="myCanvas" width="1600" height="200"></canvas> 

 绘制图案： ctx.createPattern(image,type);  

    <script type="text/javascript">
    //    ctx.createPattern(image,type);    
    //image:image对象或canvas对象； type:repeat/repeat-x/repeat-y/no-repeat        
        function draw(){
        var canvasEle=document.getElementById("myCanvas3");//canvas对象
            var context3=canvasEle.getContext('2d');
            context3.fillStyle="red";
            context3.strokeStyle="black";
            context3.beginPath();
            context3.moveTo(50,50);
            context3.lineTo(100,50);
            context3.lineTo(50,100);
            context3.closePath();
            context3.fill();
            context3.stroke();
            
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext('2d');
    //1.createPattern（）填充canvas对象
        var ptrn=ctx.createPattern(canvasEle,'repeat');
            ctx.fillStyle=ptrn;
            ctx.fillRect(0,0,3600,1600)
        }
        window.οnlοad=function(){
            draw();
        }
        </script>
        <canvas id="myCanvas" width="1020" height="880"></canvas>
        <canvas id="myCanvas3" width="300" height="100"></canvas>

    <script type="text/javascript">
    //    ctx.createPattern(image,type);    
    //image:image对象或canvas对象； type:repeat/repeat-x/repeat-y/no-repeat        
        function draw(){
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext('2d');
    //2.创建用于图案的新image对象
           var img=new Image();
          img.src='img/2.jpeg';
           img.οnlοad=function(){//预加载，图像边加载边填充
          var ptrn=ctx.createPattern(img,'repeat');//创建图案
           ctx.fillStyle=ptrn;
           ctx.fillRect(0,0,3600,1600)
          }

        window.οnlοad=function(){
            draw();
        }
        </script>
        <canvas id="myCanvas" width="1020" height="880"></canvas>
        <canvas id="myCanvas3" width="300" height="100"></canvas>