[Canvas学习]样式与颜色

Posted 2020-08-21 小碎石

学习目的：学会使用色彩，透明度，线型，渐变，图案和阴影绘制更加吸引人的内容

色彩Color

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

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

color的值可以是字符串，渐变对象或者图案对象，默认情况下，两者都是黑色#000

var cvs = document.getElementById("canvas");

if(cvs.getContext){

var ctx = cvs.getContext("2d");

for(var i=0; i<6; i++){

　　　　for(var j=0; j<6; j++){

　　ctx.fillStyle = ‘rgb(‘ + Math.floor(255-42.5*i) + ‘,‘ + Math.floor(255-42.5*j) +‘, 0)‘;

　　ctx.fillRect(25*i,25*j,25,25);

}

　　}

}

 

var cvs = document.getElementById("canvas");

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　for(var i=0; i<6; i++){

　　　　for(var j=0; j<6; j++){

　　　　　　ctx.strokeStyle = ‘rgb(0,‘ + Math.floor(255-42.5*i) + ‘,‘ + Math.floor(255-42.5*j) + ‘)‘;

　　　　　　ctx.beginPath();

　　　　　　ctx.arc(12.5+25*i, 12.5+25*j, 10, 0, Math.PI*2, true);

　　　　　　ctx.stroke();

　　　　}

　　}

}

 

透明度Transparency

globalAlpha = transparencyValue 设置所有图形的透明度，从0.0到1.0 默认值为1.0（完全不透明）

如果是绘制大量带有相同透明度的图形，可以使用globalAlpha属性。其他情况下建议使用strokeStyle和fillStyle的rgba()特性来设置颜色的透明度

var cvs = document.getElementById("canvas");

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　ctx.fillStyle = "#fd0";

　　ctx.fillRect(0,0,75,75);

　　ctx.fillStyle = "#6c0";

　　ctx.fillRect(75,0,75,75);

　　ctx.fillStyle = "#09f";

　　ctx.fillRect(0,75,75,75);

　　ctx.fillStyle = "#f30";

　　ctx.fillRect(75,75,75,75);

　　ctx.fillStyle = "#fff";

 

　　//绘制一系列透明度的圆

　　ctx.globalAlpha = 0.2;

　　for(var i=0; i<7; i++){

　　　　ctx.beginPath();

　　　　ctx.arc(75, 75, 10+10*i, 0, Math.PI*2, true);

　　　　ctx.fill();

　　}

}

使用rgba()这种特性值具有更好的操作性和灵活性

var cvs = document.getElementById("canvas");

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　ctx.fillStyle = "rgb(255,221,0)";

　　ctx.fillRect(0,0,150,37.5);

　　ctx.fillStyle = "rgb(102,204,0)";

　　ctx.fillRect(0,37.5,150,37.5);

　　ctx.fillStyle = "rgb(0,153,255)";

　　ctx.fillRect(0,75,150,37.5);

　　ctx.fillStyle = "rgb(255,51,0)";

　　ctx.fillRect(0,112.5,150,37.5);

 

　　for(var i=0; i<10; i++){

　　ctx.fillStyle = "rgba(255,255,255,"+((i+1)/10)+")";

　　　　for(var j=0; j<4; j++){

　　ctx.fillRect(15*i, 37.5*j, 15*(i+1), 37.5);

　　}

}

 

线型Line Styles

lineWidth = value 线条宽度，默认值是1.0 给定路径的中心到两边的粗细，在路径的两边各绘制宽度的一半。

lineCap = type 线条末端样式

lineJoin = type 线条与线条间的结合处的样式

miterLimit = value 限制当两条线相交时交接处的最大长度

getLineDash() 返回一个包含当前虚线样式的数组

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

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

// lineWidth的逐值递增，注意线条为奇数时，线条中心线位置应该处于像素网格中间，这样线条才不至于模糊

var cvs = document.getElementById("canvas");

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　for(var i=0; i<10; i++){

　　　　ctx.beginPath();

　　　　ctx.lineWidth = i+1;

　　　　if(i%2===0){

　　　　　　ctx.moveTo(5+i*14-0.5, 5);

　　　　　　ctx.lineTo(5+i*14-0.5, 140);

　　　　}else{

　　　　　　ctx.moveTo(5+i*14, 5);

　　　　　　ctx.lineTo(5+i*14.5, 140);

　　　　}

　　　　ctx.stroke();

　　}

}

 

 

 

渐变Gradients

渐变根据类型不同，分为线性渐变和径向渐变两种。原理与CSS3的渐变特性是一样的。

在Canvas中，通过API创建一个canvasGradient对象，将这个对象赋给fillStyle和strokeStyle属性。

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之间的数值。color是一个有效的CSS颜色值

var cvs = document.getElementById("canvas");

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　var lineargradient1 = ctx.createLinearGradient(0,0,0,150);

　　lineargradient1.addColorStop(0, "#00abeb");

　　lineargradient1.addColorStop(0.5, "#fff");

　　lineargradient1.addColorStop(0.5, "#26c000");

　　lineargradient1.addColorStop(1, "#fff");

　　var lineargradient2 = ctx.createLinearGradient(0,50,0,95);

　　lineargradient2.addColorStop(0.5, "#000");

　　lineargradient2.addColorStop(1, "rgba(0,0,0,0)");

　　

　　ctx.fillStyle = lineargradient1;

　　ctx.strokeStyle = lineargradient2;

　　ctx.fillRect(10,10,130,130);

　　ctx.strokeRect(50,50,50,50);

}

 

图案样式Patterns

createPattern(image, type)

image可以是一个image对象的引用，也可以是一个canvas对象。 Type是字符串，取值： repeat  repeat-x  repeat-y  no-repeat

创造出一个pattern对象后，将其赋给fillStyle 或者 strokeStyle 属性。 同时注意，这里的image对象必须是加载完毕的状态。

var cvs = document.getElementById("canvas");

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　var img = new Image();

　　img.onload = function(){

　　　　var pattern = ctx.createPattern(this, "repeat");

　　　　ctx.fillStyle = pattern;

　　　　ctx.fillRect(0,0,150,150);

　　}

　　img.src = "images/pattern.png";

}

 

阴影Shadows

shadowOffsetX = float   设置阴影在X轴上的延伸距离，正值表示阴影会向右延伸，负值表示阴影会向左延伸

shadowOffsetY = float   设置阴影在Y轴上的延伸距离，正值表示阴影会向下延伸，负值表示阴影会向上延伸 

shadowBlur = float        设置阴影的模糊程度

shadowColor = float       设置阴影的颜色效果，默认全透明黑色

var cvs = document.getElementById("canvas");

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　ctx.shadowOffsetX = 2;

　　ctx.shadowOffsetY = 2;

　　ctx.shadowBlur = 2;

　　ctx.shadowColor = "rgba(0,0,0,0.5)";

　　ctx.font = "20px Times New Roman";

　　ctx.fillStyle = "black";

　　ctx.fillText("simple string", 5, 30);

}

 

Canvas的填充规则

适用于fill, clip, isPointinPath等情形，用于判断某处是在路径里面或者外面。 取值： "nonzero" (默认值)   "evenodd"

var cvs = document.getElementById("canvas");

if(cvs.getContext){

　　var ctx = cvs.getContext("2d");

　　ctx.beginPath();

　　ctx.arc(50,50,30,0,Math.PI*2, true);

　　ctx.arc(50,50,15,0,Math.PI*2, true);

　　ctx.fill("evenodd");

}