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 //              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 //              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();
            }
        
         

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