Gauss Zhou

# 样式和颜色

# 基本的颜色控制

之前我们绘制的图形都是黑白的，现在让我们给图形上色，这里有两个重要的属性可以做到这一点，fillStyle和strokeStyle

// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

看代码

function draw() {
  const canvas = document.getElementById("demo6_1");
  canvas.width = 250;
  canvas.height = 550;
  const ctx = canvas.getContext("2d");
  const cellSize = 1;
  const splitSize = 1;
  for (let i = 0; i < 255 / splitSize; i++) {
    for (let j = 0; j < 255 / splitSize; j++) {
      const r = Math.floor(255 - i * splitSize);
      const g = Math.floor(255 - j * splitSize);
      ctx.fillStyle = `rgb(${r},${g},0)`;
      ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
    }
  }
  const arcSize = 25;
  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      const r = Math.floor(255 - i * arcSize);
      const g = Math.floor(255 - j * arcSize);
      ctx.strokeStyle = `rgb(${r},${g},0)`;
      ctx.beginPath();
      ctx.arc(
        0 + 12.5 + j * arcSize,
        300 + 12.5 + i * arcSize,
        10,
        0,
        Math.PI * 2,
        true
      );
      ctx.stroke();
    }
  }
}

看效果

# 透明度

globalAlpha设置画布上的全局透明度，有效值为 0-1，但是下面的写法更具有可操作性

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

看代码

function draw() {
  var ctx = document.getElementById("demo6_2").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();
  }
}

看效果

# 线型

属性 说明 可选值
lineWidth 线宽 Number 默认 1.0
lineCap 末端样式 butt round square 默认 butt
lineJoin 线条接合 round bevel miter 默认 miter
miterLimit 交界长度
setLineDash 虚线样式 一个非负偶数数组
lineDashOffset 虚线偏移量
getLineDash 获取虚线样式

lineWidth: 注意当位置和线宽的组合为非整数的时候，会导致绘图不清晰的情况，如下图

canvas-grid

lineCap: 从上到下依次是round圆角、bevel截平、miter斜接

canvas-line-join

lineDashOffset

const canvas = document.getElementById("demo6_3");
const ctx = canvas.getContext("2d");
let offset = 0;
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10, 10, 100, 100);
}
function march() {
  offset = offset + (1 % 16);
  draw();
  setTimeout(march, 20);
}
march();

看效果

# 渐变 Gradients

fillStyle和strokeStyle属性可以接收canvasGradient对象

canvasGradient对象通过createLinearGradient和createRadialGradient方法来创建

// x1 y1 x2 y2
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
// x1 y1 r1 x2 y2 r2
var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);

配置色标，色标用来设置渐变过渡的颜色

gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");

看代码

function draw() {
  const ctx = document.getElementById("demo6_4").getContext("2d");

  // Create gradients
  const lingrad = ctx.createLinearGradient(0, 0, 0, 150);
  lingrad.addColorStop(0, "#00ABEB");
  lingrad.addColorStop(0.5, "#fff");
  lingrad.addColorStop(0.5, "#26C000");
  lingrad.addColorStop(1, "#fff");

  const lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
  lingrad2.addColorStop(0.5, "#000");
  lingrad2.addColorStop(1, "rgba(0,0,0,0)");
  
  // assign gradients to fill and stroke styles
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;
  // draw shapes
  ctx.fillRect(10, 10, 130, 130);
  ctx.strokeRect(50, 50, 50, 50);
}

看效果

基本的颜色控制
透明度
线型
渐变 Gradients