canvas笔记三---样式和颜色

1、色彩 Colors
到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。
fillStyle = color
设置图形的填充颜色。
strokeStyle = color
设置图形轮廓的颜色。

2、fillStyle

下方案例使用for循环生成放个阵列，每个方格颜色不同

for(let i = 0;i<6;i++){
    for(let j=0;j<6;j++){
        ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0'
        ctx.fillRect(j*25,i*25,25,25)
    }
}

3、strokeStyle

这个示例与上面的有点类似，但这次用到的是 strokeStyle 属性，画的不是方格，而是用 arc 方法来画圆

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+j*25,12.5+i*25,10,0,Math.PI*2,true);
    ctx.stroke();
  }
}

4、透明度Transparency

通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。
globalAlpha = transparencyValue

但使用rgba的方式设置透明度更加简洁

// 指定透明颜色，用于描边和填充样式
ctx.strokeStyle = “rgba(255,0,0,0.5)”;
ctx.fillStyle = “rgba(255,0,0,0.5)”;

5、线型line Styles

可以通过一系列属性来设置线的样式。
lineWidth = value
设置线条宽度。
lineCap = type
设置线条末端样式。
lineJoin = type
设定线条与线条间接合处的样式。
miterLimit = value
限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
getLineDash()
返回一个包含当前虚线样式，长度为非负偶数的数组。
setLineDash(segments)
设置当前虚线样式。
lineDashOffset = value
设置虚线样式的起始偏移量。

lineWidth属性
在下面的例子中，用递增的宽度绘制了10条直线。最左边的线宽1.0单位

for (var i = 0; i < 10; i++){
ctx.lineWidth = 1+i;
ctx.beginPath();
ctx.moveTo(5+i14,5);
ctx.lineTo(5+i14,140);
ctx.stroke();
}

lineCap属性
属性 lineCap 的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt，round 和 square。默认是 butt。

var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
var lineCap = [‘butt’,‘round’,‘square’];
ctx.strokeStyle = ‘black’;
for (var i=0;i<lineCap.length;i++){
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25+i50,10);
ctx.lineTo(25+i50,140);
ctx.stroke();
}
三种样式的展现如下

lineJoin

lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round, bevel 和 miter。默认是 miter。

var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
var lineJoin = [‘round’, ‘bevel’, ‘miter’];
ctx.lineWidth = 10;
for (var i = 0; i < lineJoin.length; i++) {
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(-5, 5 + i * 40);
ctx.lineTo(35, 45 + i * 40);
ctx.lineTo(75, 5 + i * 40);
ctx.lineTo(115, 45 + i * 40);
ctx.lineTo(155, 5 + i * 40);
ctx.stroke();
}

虚线
用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式. setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset 属性设置起始偏移量.

let ctx = document.getElementById('mycanvas').getContext("2d")
var offset = 0

function draw(){
    ctx.clearRect(0,0,500,500)
    ctx.setLineDash([4,2])
    ctx.lineDashOffset = -offset
    ctx.strokeRect(10,10,100,100)
}
function march(){
    offset++
    if(offset > 16){
        offset = 0
    }
    draw()
    setTimeout(march,20)  // 定时产生偏移，形成跑马灯的效果
}
march()

6、渐变

就好像一般的绘图软件一样，我们可以用线性或者径向的渐变来填充或描边。我们用下面的方法新建一个 canvasGradient 对象，并且赋给图形的 fillStyle 或 strokeStyle 属性。
createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。

var lineargradient = ctx.createLinearGradient(0,0,150,150);
var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);

lineargradient.addColorStop(0,‘white’);
lineargradient.addColorStop(1,‘black’);

let ctx = document.getElementById('mycanvas').getContext("2d")
let linear = ctx.createLinearGradient(10,10,130,130)
linear.addColorStop(0,'red')
linear.addColorStop(1,"green")
ctx.fillStyle = linear
ctx.fillRect(10,10,130,130)

7、图案样式Patterns

createPattern(image, type)
该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

var ctx = document.getElementById(‘canvas’).getContext(‘2d’);

// 创建新 image 对象，用作图案
var img = new Image();
img.src = ‘https://mdn.mozillademos.org/files/222/Canvas_createpattern.png’;
img.onload = function() {

// 创建图案
var ptrn = ctx.createPattern(img, 'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 150, 150);

}

8、阴影Shadows

shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor = color
shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

var ctx = document.getElementById(‘canvas’).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(“Sample String”, 5, 30);