06.md

绘制阴影

前言

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

context = canvas.getContext('2d')

绘制阴影的基本API

// 描述模糊效果
context.shadowBlur = 0

// 阴影的颜色
context.shadowColor = '#000'

// 阴影水平方向的偏移量
context.shadowOffsetX = 0

// 阴影垂直方向的偏移量
context.shadowOffsetY = 0

实际操作阴影绘制

demo 源码地址 https://github.com/chenshenhai/canvas-note/tree/master/demo/basic/drawing-shadows

<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.shadowColor = "blue";
  context.shadowBlur = 20;
  context.shadowOffsetX = 20;
  context.shadowOffsetY = 20;

  context.fillStyle = "#aaa";
  context.fillRect(50, 50, 100, 100);
})();