HTML5画布-模式和阴影

HTML5画布是一个非常有趣的技术，它可以帮助我们创建各种图形和图像。我们可以使用画布来绘制图形、渲染图像以及创建各种特效。在这篇文章中，我们将探讨HTML5画布中的模式和阴影。

什么是模式

模式是用于填充绘图形状的图案。图案可以是颜色、渐变或图像等。HTML5画布提供了以下三种类型的模式：

颜色模式
渐变模式
图像模式

颜色模式

颜色模式是根据指定的颜色填充绘图形状。以下是一个简单示例：

<canvas id="myCanvas" width="200" height="100"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

上面的代码创建了一个200×100大小的画布，并在其上绘制了一个红色正方形。fillStyle属性用于指定填充颜色。

渐变模式

渐变模式是根据指定的渐变颜色填充绘图形状。以下是一个简单示例：

<canvas id="myCanvas" width="200" height="100"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "white");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 50, 50);

上面的代码创建了一个200×100大小的画布，并在其上绘制了一个红色到白色渐变的正方形。createLinearGradient方法创建了一个线性渐变对象，它从(0,0)到(200,0)。addColorStop方法用于指定颜色停止点。

图像模式

图像模式是使用指定的图像填充绘图形状。以下是一个简单示例：

<canvas id="myCanvas" width="200" height="100"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
  var pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(10, 10, 50, 50);
};
img.src = "image.jpg";

上面的代码创建了一个200×100大小的画布，并在其上绘制了一个从指定图像中填充的正方形。createPattern方法创建了一个图像填充对象。在此示例中，图像将以重复方式填充图形。

什么是阴影

阴影是指在绘制的图形周围产生的一种视觉效果。它可以用于创建深度感或添加高光。HTML5画布提供了以下三种类型的阴影：

色阴影
模糊阴影
内阴影

色阴影

色阴影是指在绘制的图形周围产生的一种指定颜色的阴影。以下是一个简单示例：

<canvas id="myCanvas" width="200" height="100"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

上面的代码创建了一个200×100大小的画布，并在其上绘制了一个有黑色阴影的红色正方形。shadowColor属性用于指定阴影颜色。

模糊阴影

模糊阴影是指在绘制的图形周围产生的颜色模糊的阴影。以下是一个简单示例：

<canvas id="myCanvas" width="200" height="100"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.shadowColor = "black";
ctx.shadowBlur = 5;
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

上面的代码创建了一个200×100大小的画布，并在其上绘制了一个有模糊阴影的红色正方形。shadowBlur属性用于指定阴影的模糊半径。

内阴影

内阴影是指在绘制的图形内部产生阴影。以下是一个简单示例：

<canvas id="myCanvas" width="200" height="100"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.shadowColor = "black";
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

上面的代码创建了一个200×100大小的画布，并在其上绘制了一个有内阴影的红色正方形。shadowOffsetX和shadowOffsetY属性用于指定阴影的偏移量。