javascript七基础学习系列一千四百六十：2D 绘图上下文

2D 绘图上下文提供了绘制2D 图形的方法，包括矩形、弧形和路径。2D 上下文的坐标原点(0, 0)在
元素的左上角。所有坐标值都相对于该点计算，因此x 坐标向右增长，y 坐标向下增长。默认
情况下，width 和height 表示两个方向上像素的最大值。
填充和描边
2D 上下文有两个基本绘制操作：填充和描边。填充以指定样式（颜色、渐变或图像）自动填充形
状，而描边只为图形边界着色。大多数2D 上下文操作有填充和描边的变体，显示效果取决于两个属性：
fillStyle 和strokeStyle。
这两个属性可以是字符串、渐变对象或图案对象，默认值都为"#000000"。字符串表示颜色值，可
以是CSS 支持的任意格式：名称、十六进制代码、rgb、rgba、hsl 或hsla。比如：
let drawing = document.getElementById(“drawing”);
// 确保浏览器支持
if (drawing.getContext) {
let context = drawing.getContext(“2d”);
context.strokeStyle = “red”;
context.fillStyle = “#0000ff”;
}
这里把strokeStyle 设置为"red"（CSS 颜色名称），把fillStyle 设置为"#0000ff"（蓝色）。
所有与描边和填充相关的操作都会使用这两种样式，除非再次修改。这两个属性也可以是渐变或图案，
本章后面会讨论。
绘制矩形
矩形是唯一一个可以直接在2D 绘图上下文中绘制的形状。与绘制矩形相关的方法有3 个：
fillRect()、strokeRect()和clearRect()。这些方法都接收4 个参数：矩形x 坐标、矩形y 坐标、
矩形宽度和矩形高度。这几个参数的单位都是像素。
fillRect()方法用于以指定颜色在画布上绘制并填充矩形。填充的颜色使用fillStyle 属性指
定。来看下面的例子：
let drawing = document.getElementById(“drawing”);
// 确保浏览器支持
if (drawing.getContext) {
let context = drawing.getContext(“2d”);
/*

• 引自MDN 文档
  /
  // 绘制红色矩形
  context.fillStyle = “#ff0000”;
  context.fillRect(10, 10, 50, 50);
  // 绘制半透明蓝色矩形
  context.fillStyle = “rgba(0,0,255,0.5)”;
  context.fillRect(30, 30, 50, 50);
  }
  以上代码先将fillStyle 设置为红色并在坐标点(10, 10)绘制了一个宽高均为50 像素的矩形。接
  着，使用rgba()格式将fillStyle 设置为半透明蓝色，并绘制了另一个与第一个部分重叠的矩形。
  strokeRect()方法使用通过strokeStyle 属性指定的颜色绘制矩形轮廓。下面是一个例子：
  let drawing = document.getElementById(“drawing”);
  // 确保浏览器支持
  if (drawing.getContext) {
  let context = drawing.getContext(“2d”);
  /
• 引自MDN 文档
  /
  // 绘制红色轮廓的矩形
  context.strokeStyle = “#ff0000”;
  context.strokeRect(10, 10, 50, 50);
  // 绘制半透明蓝色轮廓的矩形
  context.strokeStyle = “rgba(0,0,255,0.5)”;
  context.strokeRect(30, 30, 50, 50);
  }
  以上代码同样绘制了两个重叠的矩形，不过只有轮廓，而不是实心的
  使用clearRect()方法可以擦除画布中某个区域。该方法用于把绘图上下文中的某个区域变透明。
  通过先绘制形状再擦除指定区域，可以创建出有趣的效果，比如从已有矩形中开个孔。来看下面的例子：
  let drawing = document.getElementById(“drawing”);
  // 确保浏览器支持
  if (drawing.getContext) {
  let context = drawing.getContext(“2d”);
  /
• 引自MDN 文档
  */
  // 绘制红色矩形
  context.fillStyle = “#ff0000”;
  context.fillRect(10, 10, 50, 50);
  // 绘制半透明蓝色矩形
  context.fillStyle = “rgba(0,0,255,0.5)”;
  context.fillRect(30, 30, 50, 50);
  // 在前两个矩形重叠的区域擦除一个矩形区域
  context.clearRect(40, 40, 10, 10);
  }
  以上代码在两个矩形重叠的区域上擦除了一个小矩形.