首页 > 代码库 > [Canvas学习]样式与颜色
[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 = "http://www.mamicode.com/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");
}
[Canvas学习]样式与颜色