Canvas入门(四)

阴影

设置好阴影有关的属性值，就能够自动为要绘制的形状或路径生成阴影

shadowOffsetX：阴影相对于形状或路径的 x 坐标偏移。默认为 0
shadowOffsetY：阴影相对于形状或路径的 y 坐标偏移。默认为 0
shadowBlur：阴影的模糊量。默认值为 0，表示不模糊
shadowColor：阴影的颜色。默认为黑色

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  context.shadowOffsetX = 5;
  context.shadowOffsetY = 10;
  context.shadowBlur = 5;
  context.shadowColor = "rgba(0, 0, 0, .2)";

  context.fillStyle = "red";
  context.fillRect(0, 0, 50, 50);

  context.moveTo(100, 100);
  context.lineTo(180, 20);

  context.lineWidth = 12;
  context.stroke();
}

渐变

线性渐变

线性渐变可以调用上下文的createLinearGradient方法，接收四个参数：起点 x 坐标、起点 y 坐标、终点 x 坐标、终点 y 坐标，创建CanvasGradient对象。

有了渐变对象后，就需要添加渐变色标了，通过addColorStop可以添加色标，第一个参数范围为 0~1，第二个参数是 CSS 颜色字符串。

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  const gradient = context.createLinearGradient(10, 10, 180, 180);

  gradient.addColorStop(0, "red");
  gradient.addColorStop(0.5, "blue");
  gradient.addColorStop(1, "purple");

  context.fillStyle = gradient;
  context.fillRect(0, 0, 200, 200);
}

为了让渐变覆盖整个矩形，渐变的坐标和矩形的坐标应该搭配合适，不然只会显示部分渐变。

还可以调用上下文的createRadialGradient方法来创建径向渐变。接收 6 个参数，前 3 个参数指定起点圆形中心的 x 坐标、y 坐标和半径，后 3 个参数指定终点圆形中心的 x 坐标和半径。

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  let gradient = context.createRadialGradient(100, 100, 20, 100, 100, 80);
  gradient.addColorStop(0, "white");
  gradient.addColorStop(1, "black");

  context.fillStyle = gradient;
  context.fillRect(0, 0, 200, 200);
}

上面这个渐变，简单理解就是内层圆为半径为 20 像素的纯白圆，外层圆为 80 像素的白渐变黑圆，剩余部分就是黑色。

图案

图案适用于填充和描画图形的重复图像。通过createPattern方法，该方法接收两个参数，第一个参数是img元素，第二个参数是是否重复，和background-repeat属性一样。

然后，像渐变一样，把pattern对象赋值给fillStyle属性即可。

这个图案实际上就有点背景图像的味道了，通过创建pattern对象，来控制图像的重复。然后，给绘图上下文的fillStyle赋值，设置填充样式，最后再通过fillRect来设置图案的位置和大小。

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  const image = document.images[0];

  const pattern = context.createPattern(image, "repeat");
  // const pattern = context.createPattern(image, 'repeat-y')
  // const pattern = context.createPattern(image, 'no-repeat')

  context.fillStyle = pattern;
  context.fillRect(0, 0, 190, 190);
}