05.md

填充颜色

前言

前提基础是根据 canvas DOM创建的二维上下文

context = canvas.getContext('2d')。

以下操作例子 demo 源码地址 https://github.com/chenshenhai/canvas-note/tree/master/demo/basic/filling-color

填充纯色

context.fillStyle = '#125394';

实际操作颜色填充

<canvas id="canvas-1"></canvas>

(function() {
  // 绘制填充颜色 canvas-1
  const canvas = document.getElementById('canvas-1');
  canvas.width = 400;
  canvas.height = 400;
  const context = canvas.getContext('2d');

  context.fillStyle = '#125394';
  context.fillRect(100, 100, 200, 200);
})();

填充透明度

context.fillStyle = '#125394';
context.globalAlpha = 0.5;

实际操作填充透明度

<canvas id="canvas-2"></canvas>

(function() {
  // 绘制填充颜色透明度 canvas-2
  const canvas = document.getElementById('canvas-2');
  canvas.width = 400;
  canvas.height = 400;
  const context = canvas.getContext('2d');

  context.fillStyle = '#125394';
  context.globalAlpha = 0.5;
  context.fillRect(100, 100, 200, 200);
})();

填充渐变

线性渐变

// 初始化渐变的位置
/**
 * @param {number} x1 渐变渲染起点X轴坐标
 * @param {number} y1 渐变渲染起点Y轴坐标
 * @param {number} x2 渐变渲染终点X轴坐标
 * @param {number} y2 渐变渲染终点Y轴坐标
 * context.createLinearGradient(x1, y1, x2, y2)
 * */
const gradient = context.createLinearGradient(0, 0, 400, 400);

/**
 * @param {number} position  0.0-1.0 的数值, 代表渐变颜色的相对位置
 * @param {string} color 有效的颜色值，和CSS一致
 * gradient.addColorStop(position, color)
 * */

// 设置渐变各阶段的颜色
gradient.addColorStop(0, '#000');
gradient.addColorStop(0.5, '#999');
gradient.addColorStop(1, '#ccc');

// 使用线性渐变颜色
context.fillStyle = gradient;

实际操作线性渐变

<canvas id="canvas-3"></canvas>

(function() {
  // 线性渐变 canvas-3
  const canvas = document.getElementById('canvas-3');
  canvas.width = 400;
  canvas.height = 400;
  const context = canvas.getContext('2d');

  const linearGradient1 = context.createLinearGradient(50, 100, 350, 100);
  linearGradient1.addColorStop(0, '#0c3d6d');
  linearGradient1.addColorStop(1, '#c8dcf1');
  context.fillStyle = linearGradient1;
  context.fillRect(50, 50, 300, 100);

  const linearGradient2 = context.createLinearGradient(200, 200, 350, 350);
  linearGradient2.addColorStop(0, '#0c3d6d');
  linearGradient2.addColorStop(1, '#c8dcf1');
  context.fillStyle = linearGradient2;
  context.fillRect(200, 200, 150, 150);

})();

径向渐变

// 初始化渐变的位置
/**
 * @param {number} x1 径向渐第一个圆 圆心X轴坐标
 * @param {number} y1 径向渐第一个圆 圆心Y轴坐标
 * @param {number} r1 径向渐第一个圆半径长度
 * @param {number} x2 径向渐第二个圆 圆心X轴坐标
 * @param {number} y2 径向渐第二个圆 圆心Y轴坐标
 * @param {number} r2 径向渐第二个圆半径长度
 * context.createRadialGradient(x1, y1, r1, x2, y2, r2)
 * */
const gradient = context.createLinearGradient(0, 0, 400, 400);

/**
 * @param {number} position  0.0-1.0 的数值, 代表渐变颜色的相对位置
 * @param {string} color 有效的颜色值，和CSS一致
 * gradient.addColorStop(position, color)
 * */

// 设置渐变各阶段的颜色
gradient.addColorStop(0, '#000');
gradient.addColorStop(1, '#ccc');

// 使用径向渐变颜色
context.fillStyle = gradient;

实际操作径向渐变

<canvas id="canvas-4"></canvas>

(function() {
  // 径向渐变 canvas-4
  const canvas = document.getElementById('canvas-4');
  canvas.width = 400;
  canvas.height = 400;
  const context = canvas.getContext('2d');

  const radialGradient1 = context.createRadialGradient(200, 200, 50, 200, 200, 100);
  radialGradient1.addColorStop(0, '#0c3d6d');
  radialGradient1.addColorStop(1, '#c8dcf1');
  context.globalAlpha = 0.8;
  context.fillStyle = radialGradient1;
  context.fillRect(50, 50, 300, 300);
})();