[Canvas学习]样式与颜色

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

色彩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");

}

 

posted @ 2016-11-26 21:50  小碎石  阅读(1197)  评论(0编辑  收藏  举报