HTML5 canvas Color,Text,setLineDash,lineDashOffset

fillStyle = color 设置图形的填充颜色

for( var i = 0 ; i <=7; i++){
                for ( var j=0; j<=7; j++){
                    ctx.fillStyle='rgba(' + Math.floor(255-15.5*i) + ',0,0,0.5)';
                    ctx.beginPath();
                    ctx.arc(15+15*i,15+15*j,10,0,Math.PI*2,true);
                    ctx.closePath();
                    ctx.fill();
                }
            }

strokeStyle = color 设置图形轮廓的颜色

for(var i=0; i<7; i++){
                for(var j=0; j<=i; j++){
                    ctx.strokeStyle='rgb(0,'+Math.floor(255-30*i)+','+Math.floor(255-10*j)+')';
                    ctx.strokeRect(200+10*i,10+10*j,60,60);
                }
            }

globalAlpha

for (var i = 0;i<7; i++){
                if(i%2==0){
                    ctx.fillStyle="#f391a9";
                    ctx.fillRect(400,10+20*i,200,20);
                }else{
                    ctx.fillStyle="#d71345";
                    ctx.fillRect(400,10+20*i,200,20);
                }
            }
            ctx.globalAlpha = 0.3;
            for(var j = 0 ; j<4; j++){
                ctx.fillStyle="#ffffff";
                ctx.fillRect(400+50*j,10,20,140);
            }

线型Line styles

lineWidth = value 设直线条宽度

lineCap = type 设置线条末端样式

lineJoin = type 设定线条与线条间接合处的样式

miterLimit = value 限制当两条线相交时交界处最大长度；所谓交界处长度（斜接长度）是指线条交界处内角向

getLineDash() 返回一个包含当前虚线样式，长度为非负偶数的数组

setLineDash(segments) 设置当前虚线样式

lineDashOffset = value 设置虚线样式起始偏移量

lineWidth(示例)

 for(var i = 0; i < 10; i++){
                ctx.lineWidth = 1 + i;
                ctx.beginPath();
                ctx.moveTo(650+i*10, 10);
                ctx.lineTo(650+i*10, 200);
                ctx.stroke();

lineCap 属性

设置或返回线条末端线帽样式

属性值：butt,round,square 默认butt

var lineCap = ['butt','round','square','round','butt','round','square'];

            for(var i = 0 ; i< lineCap.length; i++){
                ctx.beginPath();
                ctx.strokeStyle = "#DC143C";
                ctx.lineWidth=10;
                ctx.lineCap = lineCap[i];
                ctx.moveTo(100+25*i,160);
                ctx.lineTo(100+25*i,300);
                ctx.stroke();

            }

lineJoin 屬性

決定圖形中兩線段連接處顯示的樣式

屬性值：round,bevel,miter

var lineJoin = ['round','bevel','miter'];
            for(var i = 0; i< lineJoin.length; i++){
                ctx.beginPath();
                ctx.globalAlpha=0.8;
                ctx.strokeStyle = "#F0E68C";
                ctx.lineJoin = lineJoin[i];
                ctx.lineWidth = 20;
                ctx.moveTo(400+60*i,200);
                ctx.lineTo(320+60*i,250);
                ctx.lineTo(400+60*i,300);
                ctx.lineTo(320+60*i,350);
                ctx.stroke();
            }

setLineDash() 是canvas 2D API設置虛線樣式的方法

語法 void ctx.setLineDash(segments);

參數：一個Array數組。如果數組是奇數，那麼元素組會被重複。

ctx.lineWidth=3;
            ctx.strokeStyle="#1E90FF";
            ctx.setLineDash([10,20]);
            
            ctx.beginPath();
            ctx.moveTo(600,250);
            ctx.lineTo(800,250);
            ctx.stroke();

setLineDash 方法 与 lineDashOffset方法设置动图

ctx.clearRect(0,0,600,600);
            ctx.setLineDash([4,2]);
            ctx.strokeStyle = "green";
            ctx.lineDashOffset = -offset;
            ctx.strokeRect(10,10,200,200);
            ctx.beginPath();
            ctx.lineDashOffset = offset;
            ctx.moveTo(10,10);
            ctx.lineTo(210,210);
            ctx.closePath();
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(10,210);
            ctx.lineTo(210,10);
            ctx.closePath();
            ctx.stroke();
            ctx.strokeStyle ="red";
            for ( var i = 0; i<=7; i++){
                ctx.lineDashOffset = offset;
                ctx.strokeRect(450-25*i,200-25*i,50+20*i,50+20*i);

渐变Gradients

createLinearGradient(x1,y1,x2,y2)  渐变起点(x1,y1) 渐变终点(x2,y2);

createRadialGradient(x1,y1,r1,x2,y2,r2);  以(x1,y1)为起点，半径为r1，结束以(x2,y2)为终点，r2为终点的半径

gradient.addColorStop(position,color)  position（0.0~1.0）之间的值，0.5表示中间。

var gradient = ctx.createLinearGradient(10,200,200,200);
            gradient.addColorStop(0,"green");
            gradient.addColorStop(0.5,"white");
            gradient.addColorStop(1,"yellow")
            ctx.fillStyle = gradient;
            ctx.fillRect(10,10,200,200);

var raGradient = ctx.createRadialGradient(400,100,100,400,100,0);
            raGradient.addColorStop(0,"white");
            raGradient.addColorStop(1,"red");
            ctx.fillStyle = raGradient;
            ctx.fillRect(300,0,200,200)

 var linRadial1 = ctx.createLinearGradient(0,300,0,600);
            linRadial1.addColorStop(0,"#FA8072");
            linRadial1.addColorStop(1,"#E0FFFF");
            ctx.fillStyle =linRadial1;
            ctx.fillRect(0,300,300,300);


            var linRadial2 = ctx.createRadialGradient(150,450,150,150,450,0);
            linRadial2.addColorStop(0,'rgba(0,0,0,0.1)');
            linRadial2.addColorStop(1,"rgba(255,250,250,0.5)");
            ctx.fillStyle = linRadial2;
            ctx.fillRect(0,300,300,300);

雪糕

var act1=ctx.createRadialGradient(85,85,25,92,92,50);
            act1.addColorStop(0,"#FFEC8B");
            act1.addColorStop(0.9,"#FFD700");
            act1.addColorStop(1,'rgba(254,244,148,0)');

            var act2 = ctx.createRadialGradient(100,160,30,110,170,50);
            act2.addColorStop(0,"#FFE1FF");
            act2.addColorStop(0.7,"#FFBBFF");
            act2.addColorStop(1,'rgba(253,135,248,0)');

            var act3 = ctx.createRadialGradient(115,235,35,125,245,53);
            act3.addColorStop(0,"#BBFFFF");
            act3.addColorStop(0.7,"#8DEEEE");
            act3.addColorStop(1,'rgba(167,206,219,0)');

            ctx.fillStyle=act1;
            ctx.fillRect(0,0,200,200);
            ctx.fillStyle=act2;
            ctx.fillRect(10,10,200,300);
            ctx.fillStyle=act3;
            ctx.fillRect(10,10,200,600);


            ctx.strokeStyle="#EEE9BF";
            ctx.beginPath();
            ctx.lineWidth=10;
            ctx.moveTo(135,293);
            ctx.lineTo(160,400);
            ctx.closePath();
            ctx.stroke();

createPattern

  var img = new Image();
            img.src = 'bcc93f49gw1f13eqstd72g206d06d4qr.gif';
            img.onload = function(){
                var ptrn = ctx.createPattern(img,'repeat');
                ctx.fillStyle = ptrn;
                ctx.fillRect(10,300,200,200);