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);