Canvas - 色彩与设定篇

上篇学会了绘製图形，此篇是要带大家一起新增细部设定与使用色彩
GOGOGO!

颜色设定

填入颜色时，需先宣告颜色再开始绘製图形，可使用方法有以下~

// 填满图形的颜色ctx.fillStyle = "rgba(0,0,0,0.5)";// 图形边线的颜色ctx.strokeStyle = "rgba(0,0,0,0.5)";// 设定宣告颜色的透明度ctx.globalAlpha = 0.2;// 範例ctx.fillStyle = 'rgb(0,153,255)';ctx.fillRect(100, 100, 150, 37.5);for (let i = 0; i < 10; i++) {  ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 10 + ')';  for (let j = 0; j < 4; j++) {    ctx.fillRect(105 + i * 14, 105 + j * 37.5, 14, 27.5);  }}

範例图形

渐层设定

渐层分为两种，分别为线性与放射状，并使用指令操控颜色

// 线性渐层ctx.createLinearGradient(x1, y1, x2, y2)// 放射状渐层ctx.createRadialGradient(x1, y1, r1, x2, y2, r2)// 渐层颜色，position 为 0 ~ 1ctx.gradient.addColorStop(position, color)

使用方法:首先将颜色设定好，再将颜色指定到需要使用的图形

线性渐层

// 範例let lineargradient = ctx.createLinearGradient(50, 50, 200, 200);lineargradient.addColorStop(0, 'white');lineargradient.addColorStop(1, 'black');ctx.fillStyle = lineargradient;ctx.fillRect(50, 50, 150, 150);

範例图形

放射状渐层

// 範例let radgrad = ctx.createRadialGradient(100, 100, 0, 100, 100, 50);radgrad.addColorStop(0, 'white');radgrad.addColorStop(1, 'black');ctx.fillStyle = radgrad;ctx.fillRect(50, 50, 100, 100);

範例图形

线条设定

线条宽度

设定宽度时直接填入数值即可

ctx.lineWidth = value

线条端点样式

端点样式一共分为三种，如下

butt: 方形样式，无突出round: 圆形样式，突出，半径等同线宽的一半square: 方形样式，突出，突出长度等同线宽的一半

ctx.lineCap = type// 範例let lineCap = ['butt', 'round', 'square'];for (let i = 0; i < lineCap.length; i++) {  ctx.lineWidth = 15;  ctx.lineCap = lineCap[i];  ctx.beginPath();  ctx.moveTo(25 + i * 50, 10);  ctx.lineTo(25 + i * 50, 140);  ctx.stroke();}

範例图形

两线条接合处样式

接合处样式一样分为三种，如下

round: 弧型连接样式bevel: 斜面连接样式miter: 斜交连接样式

lineJoin = type// 範例let lineJoin = ['round', 'bevel', 'miter'];ctx.lineWidth = 10;for (let i = 0; i < lineJoin.length; i++) {  ctx.lineJoin = lineJoin[i];  ctx.beginPath();  ctx.moveTo(25, 35 + i * 40);  ctx.lineTo(65, 75 + i * 40);  ctx.lineTo(105, 35 + i * 40);  ctx.lineTo(145, 75 + i * 40);  ctx.lineTo(185, 35 + i * 40);  ctx.stroke();}

範例图形

阴影设定

阴影共有四个方法可设定，基本上几乎同 css 的设定

shadowOffsetX: X 轴的偏移量shadowOffsetY : Y 轴的偏移量shadowBlur : 模糊度shadowColor : 颜色
这边示範一下帮上面的範例加个阴影

// 範例ctx.shadowOffsetX = 5;ctx.shadowOffsetY = 5;ctx.shadowBlur = 5;ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';let lineJoin = ['round', 'bevel', 'miter'];ctx.lineWidth = 10;for (let i = 0; i < lineJoin.length; i++) {  ctx.lineJoin = lineJoin[i];  ctx.beginPath();  ctx.moveTo(25, 35 + i * 40);  ctx.lineTo(65, 75 + i * 40);  ctx.lineTo(105, 35 + i * 40);  ctx.lineTo(145, 75 + i * 40);  ctx.lineTo(185, 35 + i * 40);  ctx.stroke();}

範例图形

重叠设定

设定重叠图形的呈现方式，共有 12 种，详细可参考MDN

ctx.globalCompositeOperation = type

裁剪区域

此方法可将某图层裁剪成自己需要的形状

ctx.clip();

// 範例ctx.fillRect(0, 0, 150, 150);ctx.beginPath();ctx.arc(75, 75, 60, 0, Math.PI * 2, true);ctx.clip();ctx.fillStyle = '#777';ctx.fillRect(0, 0, 150, 150);

範例图形